在 Nuxt 3.0 使用 Vuetify UI 框架

Nuxt
, , ,

做法

建立專案。

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

安裝依賴套件。

1
npm i

安裝 Vuetify 框架和 MDI 字型。

1
npm i vuetify vite-plugin-vuetify

安裝 Sass 預處理器。

1
npm i sass -D

修改 nuxt.config.js 檔。

1
2
3
4
5
6
7
8
9
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: {
    enabled: true,
  },
  build: {
    transpile: ['vuetify'],
  },
});

新增 plugins/vuetify.js 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { createVuetify } from 'vuetify';
import 'vuetify/styles';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import '@mdi/font/css/materialdesignicons.css';

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

安裝 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'
  ],
})

修改 app.vue 檔。

1
2
3
4
5
6
7
<template>
  <NuxtLayout>
    <v-app>
      <NuxtPage />
    </v-app>
  </NuxtLayout>
</template>

新增 pages/about.vue 檔。

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div>
    <h1>About</h1>
    <v-btn>
      Hello
    </v-btn>
    <v-icon>
      mdi-pen
    </v-icon>
  </div>
</template>

啟動本地伺服器。

1
npm run dev

前往 http://localhost:3000/about 瀏覽。

參考資料