🐸

Nuxt4 NuxtUI Buttonデフォルト色変更

に公開
Nuxt
TypeScript
Vue.js
Nuxt 4
Nuxt UI
tech

はじめに

Nuxt4がでてNuxtUIを久しぶりに触りました。
ボタンのデフォルトをprimaryから他のに変更したいなーと思いその方法をメモします。

手順

まずは、Nuxtをinstallします。
Node.jsが入ってない方はこちら から！

Nuxt公式
https://nuxt.com/

Nuxt Project作成

npm create nuxt@latest

コマンドを実行すると、プロジェクト名等きかれると思いますので
任意で作成してください。
その質問の中にモジュールを導入するか？ときかれる質問がありますのでYesにし、
NuxtUIのモジュールを選択してください！

<UButton>Button</UButton>を配置してみると
デフォルトでは画像の色になっています。

そこでこのデフォルト色を変更したい！
appディレクトリの中にapp.config.tsを作成します。

export default defineAppConfig({
  ui: {
    button: {
      defaultVariants: {
        color: "neutral",
        size: "lg",
      },
    },
  },
});

再度<UButton>Button</UButton>を見てみると
デフォルト色がneutralになっています。color="neutral"を指定しなくてよくなってますね！

まとめ

app.config.tsで他にも色々NuxtUIのコンポーネントをカスタマイズできそうです！
NuxtUIの他のコンポーネントも使用してみて色々試してみたいと思います！🎊

Discussion