[nuxt3] nuxt3 + vuetify3 + pinia + typescript로 todolist앱 만들기 -1-

완전히 새로운 스택들로 새 프로젝트를 시작할 일이 생겨서 배웠던 내용을 정리하기 위해 todolist강의를 제작하게 되었습니다.

사전 학습 목록

• vue3.js
• javascript
• typescript

사전 설치 목록

• node.js
• yarn

 

node.js는 최신 lts 버전을 설치해주세요.

 

• Nuxt3 설치

npx nuxi init nuxt3-vuetify3-pinia
cd nuxt3-vuetify3-pinia
yarn install

 

위 코드를 실행하면 기본 라이브러리가 모두 설치됩니다.

• pinia와 vuetify3 설치

yarn add vuetify@3.0.0-alpha.12 sass pinia

설치가 완료되고 나면 아래와 같이 plugins 폴더 아래에 파일을 생성해주세요.

두 파일을 생성했으면 각 내용을 적어줍니다.

Nuxt3에서는 defineNuxtPlugin함수를 plugins폴더에서 export하면 자동으로 플러그인을 적용해줍니다.

또한 defineNuxtPlugin함수 안에서 nuxtApp을 이용해 vueApp(예전의 createApp)을 이용할 수 있습니다.

• pinia.ts

import { defineNuxtPlugin } from "#app";
import { createPinia } from "pinia";

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(createPinia())
})

• vuetify.ts

import { defineNuxtPlugin } from "#app";
import { createVuetify } from 'vuetify'
import * as Components from 'vuetify/components'
 
export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(createVuetify({
        components: Components
    }))
})

모두 생성해 주셨으면 nuxt.config.ts파일에 아래와 같이 작성해줍니다.

주의할점은 defineNuxtPlugin은 #app에서 가져와야됩니다.

자동완성으로 nuxt3에서 가져오도록 import 되면 에러납니다.

• nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    buildModules: [
        "@pinia/nuxt"
    ],
    css: ['vuetify/lib/styles/main.sass'],
    build: {
        transpile: ['vuetify']
    },
    target: "static",
    ssr: false
})

※ 참고로 원래는 아직 nuxt3에 최적화되지 않은 라이브러리이므로 ssr옵션을 켜면 fs모듈이 제대로 작동하지 않습니다.

여기까지 오셨으면 기본적인 세팅은 끝입니다.