在 Nuxt 3.12 使用 Vuetify UI 框架

link管理

链接快照平台

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

相关文章推荐

谈吐大方的盒饭 · iCloud ...· 2 周前 ·

阳刚的黑框眼镜 · Chrome正在下载PDF而不是显示 - · 2 周前 ·

聪明的领带 · jwt 无痛刷新最佳实践axios ...· 2 周前 ·

绅士的打火机 · 揭秘51岁吃瓜老虎菜与98年幼师的出生故事与 ...· 2 周前 ·

潇洒的伤疤 · GIS开发培训-新中地教育-行业动态· 5 天前 ·

豪气的大葱 · 可见光，人眼可感知的电磁波？ | 中国无线电管理· 1 月前 ·

小眼睛的火龙果 · 前端怎樣將字符串轉義 - CSDN文库· 3 月前 ·

一身肌肉的拖把 · 灯塔国际公益影像节· 4 月前 ·

温文尔雅的钥匙 · Using Cypress | ...· 6 月前 ·

鬼畜的开水瓶 · 安装Node.js - ...· 6 月前 ·

修改 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