Nuxt3 への Vant4 導入

はじめに

前回、 Nuxt3 の環境構築 についての記事 を書きましたが、今回は UI フレームワーク Vant の導入をまとめました。

Vant の公式サイトはこちらです。

Vant バージョン： 4.0.10

前提条件

上述した前回記事の方法でできあがったプロジェクトの状態からスタートする記事になっています。 Nuxt3 の環境がない場合は前回記事から作成してお試しください。

Vant の導入

インストール

Vant を導入していきます。

npm i -D vant

初期設定

インストールしたら、初期設定をしていきます。
nuxt.config.ts を次のように変更します。

nuxt.config.ts

- export default defineNuxtConfig({})
+ export default defineNuxtConfig({
+   experimental: {
+     externalVue: true,
+   },
+ })

Vant の利用

プラグインファイルの作成

プロジェクト直下に plugins フォルダを作成し、 vant.js ファイルを作成します。そのファイルに利用したいコンポーネントをインポートし、利用可能にする設定を行います。

plugins/vant.js

import { defineNuxtPlugin } from '#app'
import { Row, Col, Button } from 'vant'

import 'vant/lib/index.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp
    .use(Row)
    .use(Col)
    .use(Button)
})

サンプルとして、 Row 、 Col 、 Button コンポーネントを利用するコードを記載しました。
利用できるコンポーネントは Vant の公式サイトに載っているので、使いたいものを記載するようにしましょう。

Nuxt2 でグローバルにプラグインを読み込むためには nuxt.config.ts への設定が必要でしたが、 Nuxt3 では plugins フォルダにあるものを自動で読み込んでくれるようです。
（これは便利！！）

Vant コンポーネントの利用

ここまでの設定で Vant の利用ができるようになりました。
app.vue に次のように記載して動作確認をしてみましょう。

app.vue

<template>
  <div>
-   <NuxtWelcome />
+   <van-button plain type="primary">Plain</van-button>
  </div>
</template>

このように表示されれば Vant が利用可能になっています。

まとめ

Nuxt3 への Vant 導入方法を記載しました。

Nuxt2 では、 UI フレームワークを CLI で選択すればある程度設定済みの状態でインストールされていました。もし使いたいものがあれば Nuxt2 の方が簡単に利用できていたということです。

この辺りはカスタマイズの自由度をとるか、こだわりなくスムーズなスタートを切るか、といった違いになるので、一概にどちらが良いとは言えませんが、 Nuxt 初学者には Nuxt3 は少しとっつきにくいのかなと感じます。