在 Nuxt 3.0 使用 Vuetify UI 框架

Nuxt
, , ,

做法

建立專案。

1
2
npx nuxi init nuxt-app
cd nuxt-app

安裝依賴套件。

1
npm i

安裝 Vuetify 框架。

1
npm i vuetify@next sass

新增 plugins/vuetify.js 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
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.js 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: [
    'vuetify/lib/styles/main.sass'
  ],
  build: {
    transpile: ['vuetify']
  },
  vite: {
    define: {
      'process.env.DEBUG': false
    }
  }
})

安裝 MDI 字型。

1
npm i @mdi/font

修改 nuxt.config.js 檔。

1
2
3
4
5
6
7
8
import {defineNuxtConfig} from 'nuxt'

export default defineNuxtConfig({
    css: [
        // ...
        '@mdi/font/css/materialdesignicons.min.css'
    ],
})

參考資料