vue3 + nuxt3 + vuetify3 세팅 & 사용법

1. nuxt3 설치

1-1. npx nuxi init [워킹스페이스 폴더명]
1-2. nuxt.config.ts -> nuxt.config.js로 확장자 변경
1-3. npm uninstall --save-dev @nuxt/typescript-build

2. vuetify 추가하기

2-1. 터미널 명령어 입력하여 vuetify 3.x 설치

npm install sass vuetify@next

3. eslint,prettierrc 추가하기

npm install ~~~~~~~~~~~~~~~~

3-1. plugins/vuetify.ts

import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

export default defineNuxtPlugin((NuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
  });

  NuxtApp.vueApp.use(vuetify);
});

3-2. nuxt.config.ts

export default defineNuxtConfig({
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/style/common.scss" as *;'
        }
      }
    }
  },
})

3-3. tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015"
  }
}

3-4. .prettierrc

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 4,
  "trailingComma": "es5"
}

3-5. package.json (설치 되었는지 확인용)

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^12.0.0",
    "eslint": "^8.37.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "nuxt": "^3.3.2",
    "prettier": "^2.8.7",
    "sass": "^1.60.0",
    "vuetify": "^3.1.4"
  }
}

4. /components/

4-1. /components/

/components/Button.vue 의 경우 임폴트 과정 없이 
바로 <Button />만 써도 적용된다.

5. /layouts/

5-1. /layouts/

• /layouts/default.vue : 기본설정 레이아웃이다.

5-1-1. 커스텀 레이아웃

• /layouts/custom.vue : 커스텀 레이아웃이다.
  slot 태그는 레이아웃으로 감쌀 섹션이다.

<template>
    <div class="wrap">
        <Header />
        	<slot />
        <Footer />
    </div>
</template>

5-1-2.

• /pages/temp/index.vue : 커스텀 레이아웃을 적용할 페이지이다.
  NuxtLayout의 name으로 커스텀레이아웃의 파일명을 적어준다.

<NuxtLayout name="custom">
    <!-- 섹션 -->
    커스텀 레이아웃 안에 채워넣을 섹션영역
    <!--// 섹션 -->
</NuxtLayout>

5-1-3. 동적으로도 레이아웃을 생성할 수 있다.

• 근데 별로 안쓸 것 같아서 생략한다. nuxt API 살펴봐라

참고:

https://www.the-koi.com/projects/how-to-set-up-a-project-with-nuxt3-and-vuetify3-with-a-quick-overview/

https://codybontecou.com/how-to-use-vuetify-with-nuxt-3.html