在 Nuxt 3.12 使用 Vuetify UI 框架

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

紧张的凳子 · 日期时间格式化· 2 小时前 ·

酷酷的红金鱼 · 微信4.4版本下载 - 百度· 1小时前 ·

善良的李子 · 微信软件低版本安卓_业界新闻_筋斗云· 1小时前 ·

不拘小节的荒野 · 安卓低版本(4.4)安装微信解析程序包错误 ...· 1小时前 ·

帅气的黑框眼镜 · Inspur IAC7000-E无线控制器-浪潮· 1小时前 ·

酷酷的便当 · 对于中国产业链来说，特斯拉就是另一个苹果_手 ...· 2 周前 ·

风流的奔马 · 北京地铁大兴机场线迎来首批“新员工” ...· 2 月前 ·

痴情的冲锋衣 · Kaiyun(云开)体育App(中国)官方网 ...· 2 月前 ·

强健的大白菜 · 去希腊不止是度蜜月，去这些地方更有意义！· 2 月前 ·

慷慨大方的野马 · ModuleNotFoundError: ...· 4 月前 ·

修改 nuxt.config.js 檔。

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  build: {
    transpile: ['vuetify'],
  },
  modules: [
    '@nuxt/eslint',
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }));
      });
    },
  ],
  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
});

新增 plugins/vuetify.js 檔。

import '@mdi/font/css/materialdesignicons.css';
import { defineNuxtPlugin } from 'nuxt/app';
import { createVuetify } from 'vuetify';
import 'vuetify/styles';

export default defineNuxtPlugin((app) => {
  const vuetify = createVuetify({
    //
  });
  app.vueApp.use(vuetify);
});

修改 eslint.config.js 檔。

import { createConfigForNuxt } from '@nuxt/eslint-config/flat';

export default createConfigForNuxt({
  features: {
    stylistic: {
      braceStyle: '1tbs',
      semi: true,
    },
  },
})
  .override('nuxt/typescript/rules', {
    rules: {
      '@typescript-eslint/ban-ts-comment': 0,
    },
  });

新增 layouts/default.vue 檔。

<template>
  <v-app>
    <v-layout>
      <v-app-bar
        color="grey"
        :height="48"
        flat
      />
      <ClientOnly>
        <v-navigation-drawer
          color="grey-lighten-1"
          :width="240"
        />
      </ClientOnly>
      <ClientOnly>
        <v-navigation-drawer
          color="grey-lighten-2"
          :width="240"
        />
      </ClientOnly>
      <v-main>
        <NuxtPage />
      </v-main>
    </v-layout>
  </v-app>
</template>

修改 app.vue 檔。

<template>
  <NuxtLayout>
    <v-app>
      <NuxtPage />
    </v-app>
  </NuxtLayout>
</template>

新增 pages/about.vue 檔。

<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 瀏覽。

SASS variables

新增 assets/vuetify.scss 檔，以覆蓋 Vuetify 的 SASS 變數。

@use 'vuetify/settings' with (
  $card-title-padding: 16px,
  $card-text-padding: 16px,
  $card-actions-padding: 16px,
);

修改 nuxt.config.js 檔，將樣式檔的路徑寫進 configFile 欄位中。

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  // ...
  sourcemap: {
    server: false,
    client: false,
  },
  modules: [
    '@pinia/nuxt',
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify({
          autoImport: true,
          styles: {
            configFile: '/assets/vuetify.scss',
          },
        }));
      });
    },
  ],
  // ...
});

Vuetify