🎩

Nuxt3のプロジェクトにNaive UIを導入する

2024/11/17に公開

Nuxt

Nuxt 3

tech

概要

Nuxt3のプロジェクトにVue3対応のUIフレームワークであるNaive UIを導入した時の手順です。

https://www.naiveui.com/en-US/os-theme

導入方法

nuxtjs-naive-uiをインストールする

npx nuxi module add nuxtjs-naive-ui

nuxt.configに自動インポートの設定を追加する

ドキュメントのUsing Auto Import in Nuxtセクションに記載されているとおり、自動インポートの設定をnuxt.configに追加します。

Nuxt3はデフォルトでviteを使用しているため、vite.pluginsへの追加となります。

nuxt.config.ts

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['nuxtjs-naive-ui'],
  // 下記設定を追加
  vite: {
    plugins: [
      AutoImport({
        imports: [
          'vue',
          {
            'naive-ui': [
              'useDialog',
              'useMessage',
              'useNotification',
              'useLoadingBar'
            ]
          }
        ]
      }),
      Components({
        resolvers: [NaiveUiResolver()]
      })
    ],
  },
})

各コンポーネントで使用する

nuxt.configに自動インポートの設定をしているため、各コンポーネントでの個別インポートは不要です。n-buttonなど使いたいコンポーネントをtemplate内に記載すれば使えます。

<template>
  <div class="wrapper">
    <n-button type="success">Click Me</n-button>
    <n-button type="primary">Primary</n-button>
    <!-- ...略 -->

コマンドの詳細

nuxtjs-naive-uiをインストールするに使ったコマンドを詳細に見ていきます。

npx nuxi module add nuxtjs-naive-ui

npx

npmがpackage managerの名前の通り、パッケージを管理する役割なのに対し、npxはパッケージを実行する役割を持ちます。

npxは、パッケージのインストール・実行・アンインストールをセットにしたコマンドです。実行のためにいちいちパッケージをグローバルにインストールせずにコマンドを実行できます。

npmを使う場合は、nuxiを一旦インストールしてからnuxiコマンドを実行する必要があります。

npm nuxi -g
nuxi module add ***

一方で、npxを使えば、インストールと実行がセットで行えます。しかも、アンインストールまでやってくれるので、作業環境を汚さずに使えます。

npx nuxi module add ***

nuxi

Nuxt開発で使用するCLIツールです。

https://nuxt.com/docs/api/commands/dev

nuxi module add

このコマンドを実行すると、下記が行われます。

指定したパッケージをインストールする
nuxt.configファイルに設定を追加する

nuxi module add nuxtjs-naive-ui

上記コマンドを実行すると、nuxtjs-naive-uiがインストールされ、nuxt.config.tsのmodulesにnuxtjs-naive-uiが追加されます。

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxtjs-naive-ui'], // この部分が自動的に追加されます。
})

補足

今回は、ドキュメントのNuxt公式の手順に従いnuxtjs-naive-uiをインストール＆使用しました。ですが、普通にnaive-uiをインストールして、各コンポーネントで直接インポートして使用することも可能です。

npm i -D naive-ui

<template>
  <div class="wrapper">
    <n-button type="success">Click Me</n-button>
    <n-button type="primary">Primary</n-button>
    <!-- ...略 -->
</template>
    <script setup>
    // コンポーネント内での個別インポート
    import { NButton } from 'naive-ui'
    </script>

nuxtjs-naive-uiでは、自動インポートを前提としているようで、個別インポートはできませんでした（私が少し試した限りですが）。個別インポートしたい場合は、nuxtjs-naive-uiではなく、naive-uiを使った方が良さそうです。