Vexip UI Nuxt

Nuxt モジュール、 Vexip UI 向け

機能

🏆 コンポーネント、プラグイン、ディレクティブ、アイコン、およびスタイルをオンデマンドで自動インポート

簡単なセットアップ

プロジェクトに @vexip-ui/nuxt の依存関係を追加

# Using pnpm
pnpm i -D @vexip-ui/nuxt

# Using yarn
yarn add -D @vexip-ui/nuxt

Vexip UI のバージョンを制御する場合は、プロジェクトに vexip-ui の依存関係も追加する必要がある

# Using pnpm
pnpm i -D vexip-ui

# Using yarn
yarn add -D vexip-ui

@vexip-ui/nuxt を nuxt.config.ts の modules セクションに追加

export default defineNuxtConfig({
  modules: [
    '@vexip-ui/nuxt'
  ],
  vexipUI: {
    // Your module options
  }
})

これで完了！Nuxt アプリで Vexip UI が使用できるようになりました

<template>
  <VButton :icon="IUser" @click="handleClick">
    Button
  </VButton>
  <VIcon>
    <ISackDollar></ISackDollar>
  </VIcon>
</template>

<script setup lang="ts">
function handleClick() {
  VMessage.success('Success!')
}
</script>

モジュールオプション

各オプションには既定値があるため、変更する場合にのみ指定する必要がある。

import type { FilterPattern } from '@rollup/pluginutils'

export interface ModuleOptions {
  /**
   * Include files that need to automatically resolve
   *
   * @default
   * [
   *   /\.vue$/,
   *   /\.vue\?vue/,
   *   /\.vue\?v=/,
   *   /\.((c|m)?j|t)sx?$/
   * ]
   */
  include: FilterPattern,
  /**
   * Include files that don't need to automatically resolve
   *
   * @default
   * [
   *   /[\\/]node_modules[\\/]/,
   *   /[\\/]\.git[\\/]/,
   *   /[\\/]\.nuxt[\\/]/
   * ]
   */
  exclude: FilterPattern,
  /**
   * Import css or sass styles with components
   *
   * @default 'css'
   */
  importStyle: boolean | 'css' | 'sass',
  /**
   * Import the dark theme preset styles
   *
   * @default false
   */
  importDarkTheme: boolean,
  /**
   * Prefix for name of components
   *
   * @default 'V'
   */
  prefix: string,
  /**
   * Auto import for directives
   *
   * @default true
   */
  directives: boolean,
  /**
   * Resolve icon components from '@vexip-ui/icons'
   *
   * @default true
   */
  resolveIcon: boolean,
  /**
   * Prefix for name of icon components, same to `prefix` if undefined or null
   *
   * @default ''
   */
  iconPrefix: string
}

コントリビューター

コントリビュートありがとうございます！

開発

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

ライセンス

すべて MIT ライセンス下です。