typescript - デフォルトフォントを Nuxt 3 + Vuetify 3 プロジェクトで変更する

私はたくさんググってみましたが、答えが見つからないようです。問題は、まだ誰もNuxt 3 + Vuetify 3の組み合わせを使っていないのかもしれないということによくあるように感じます。

カスタムのデフォルトフォントを追加しようとしています。Nuxt 2で使っていた方法で、nuxt.config.ts経由で試してみました。

vuetify: {
    customVariables: ["~/assets/variables.scss"],
    treeShake: true,
  },

でも、それはうまくいきません。

私は現在、テーマと色を定義するためにplugins/vuetify.tsを使用しています。そこに設定すべきだと思います。でも、どうやってやるかは分かりません。

import { createVuetify, ThemeDefinition } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

import "@mdi/font/css/materialdesignicons.css";

const myTheme: ThemeDefinition = {
    dark: false,
    colors: {
        primary: "#HEXHEX",
    },
    variables: {}
};

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        components,
        directives,
        theme: {
            defaultTheme: "myTheme",
            themes: {
                myTheme
            }
    },
    });

    nuxtApp.vueApp.use(vuetify);
});

テーマは動作していますが、デフォルトのフォントやスタイルを上書きする方法がわかりません。同じ問題に直面して、解決できた方はいますか？

回答 #1

私はNuxt3（v3.1.1）とVuetify3（v3.1.3）の組み合わせを使用しており、Vuetifyおよびそのユーティリティクラス（.text-h3など）のフォントをグローバルに変更することに成功しました。

まず、このチュートリアルに従って Vuetify + Nuxt をセットアップし、その後 Nuxt のツリーシェイキングガイドを適用して必要なコンポーネントだけを動的にインポートすることをお勧めします。最終的には、nuxt.config.js は以下のような形になるはずです

import vuetify from "vite-plugin-vuetify";

export default defineNuxtConfig({
  css: [
    "vuetify/lib/styles/main.sass",
  ],
  build: {
    transpile: ["vuetify"],
  },
  modules: [
    async (options, nuxt) => {
      nuxt.hooks.hook("vite:extendConfig", (config) =>
        config.plugins.push(vuetify())
      );
    },
  ],
});

その後、Vuetifyの新しいデフォルトを提供するために、.scss ファイルを作成する必要があります。

// assets/vuetifyTheme.scss
$font: "arial", sans-serif;

@use 'vuetify' with (
  $body-font-family: $font,
);

次に、plugins/vuetify.ts の先頭で vuetifyTheme.scss をインポートします

// plugins/vuetify.ts
import "@/assets/vuetifyTheme.scss";
import { createVuetify } from "vuetify";

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

  nuxtApp.vueApp.use(vuetify);
});

あなたのアプリは現在、タイポグラフィのデフォルトフォントとして「arial」を認識するはずです。

開発ツールビュー

また、vuetify/packages/vuetify/src/styles/settings/_variables.scss で定義された変数をその方法で上書きできることにも気付きました。

役に立てば嬉しいです ;)

回答 #2

私は nuxt.config.js にいくつかのCSSを手動でインポートすることで同じ問題を解決しました

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

そしてあなたのCSSファイルで

/* main.css */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('./fonts/Roboto-Light.ttf') format('truetype');
}