Nuxt3 專案安裝 Vuetify3 步驟

安裝最新版 vuetify 和 sass

    
yarn add vuetify sass
    

設定 vuetify

在專案中的 plugins 資料夾(如果沒有則需要建立此資料夾)，建立 vuetify.js 檔案 (ts 也可以)

    
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        ssr: true,
        components,
        directives,
    })

    nuxtApp.vueApp.use(vuetify)
})
    

在 nuxt.config.ts 增加以下內容:

    
export default defineNuxtConfig({
    css: ['vuetify/lib/styles/main.sass'],
    build: {
        transpile: ['vuetify'],
    },
})
    

安裝完畢!

消除 TypeScript 的警告訊息

如果出現下列 TypeScript 的警告訊息:

    
TS2345: Argument of type '{ css: string[]; build: { transpile: string[]; }; }' is not assignable to parameter of type 'NuxtConfig'.   Object literal may only specify known properties, and 'css' does not exist in type 'NuxtConfig'.
    

可以透過執行 nuxi prepare 指令來解決:

    
npx nuxi prepare
    

輸出:

    
# npx nuxi prepare
Nuxi 3.3.3
√ Types generated in .nuxt
    

參考資料：
vuetify - Get started with Vuetify 3
Nuxt - Plugins Directory