Vant Nuxt

Nuxt 用の Vant モジュール

機能

• コンポーネントとスタイルをオンデマンドで自動的にインポート。
• showDialog、showToast などのメソッドを自動的にインポート。

インストール

npx nuxi@latest module add vant
# or
npm i vant @vant/nuxt -D

export default defineNuxtConfig({
  modules: ['@vant/nuxt'],
  vant: {
    /** Options */
  },
});

使い方

<template>
  <van-button type="primary" @click="showToast('toast')">button</van-button>
  <VanButton type="success" @click="showNotify('notify')">button</VanButton>
  <LazyVanButton type="default">lazy button</LazyVanButton>
</template>

Nuxt ドキュメントとplayground の使用方法を参照してください。

オプション

lazyload

• 型: boolean | object
• デフォルト: false

ディレクティブとコンポーネントを lazyload からロードする方法。

例：{ lazyComponent: true }

importStyle

• 型: boolean
• デフォルト: true

スタイルを自動的にインポートするかどうか。

defaultLocale

• 型: string

デフォルトのロケールを置き換えます。ロケールリストはこちらにあります。

excludeExports

• 型: array
• デフォルト: ['Lazyload', 'Locale']

コンポーネントの内容ではない Vant からのエクスポートを除外します。

components

• 型: array

Vant から自動的にインポートされないコンポーネントがある場合は、ここにコンポーネントを追加する必要があります。

imports

• 型: array

Vant から自動的にインポートする内容を追加したい場合は、ここに追加できます。

include

• 型: array
• デフォルト: [ /\.vue$/, /\.vue\?vue/, /\.vue\?v=/, /\.((c|m)?j|t)sx?$/]

スタイルを自動的にインポートする必要があるファイルを含めます。

exclude

• 型: array
• デフォルト: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]

スタイルの自動インポートを必要としないファイルを除外します。

開発

• 依存関係をインストールするには、pnpm i を実行します。
• 型スタブを生成するには、pnpm dev:prepare を実行します。
• 開発モードで playground を開始するには、pnpm dev を実行します。
• playground をビルドするには、pnpm dev:build を実行します。
• ローカルで playground をプレビューするには、pnpm dev:start を実行します。
• このプロジェクトをビルドするには、pnpm build を実行します。