vexip-ui
Vexip UI Nuxt
Features
- 🏆 Automatically import components, plugins, directives, icons and their styles on demand
Quick Setup
Add @vexip-ui/nuxt dependency to your project:
# Using pnpm
pnpm i -D @vexip-ui/nuxt
# Using yarn
yarn add -D @vexip-ui/nuxtIf you want to control the version of Vexip UI, you need to add vexip-ui dependency to your project too:
# Using pnpm
pnpm i -D vexip-ui
# Using yarn
yarn add -D vexip-uiAdd @vexip-ui/nuxt to the modules section of nuxt.config.ts:
export default defineNuxtConfig({
modules: [
'@vexip-ui/nuxt'
],
vexipUI: {
// Your module options
}
})That's it! You can now use Vexip UI in your Nuxt app:
<template>
<VButton :icon="IUser" @click="handleClick">
Button
</VButton>
<VIcon>
<ISackDollar></ISackDollar>
</VIcon>
</template>
<script setup lang="ts">
function handleClick() {
VMessage.success('Success!')
}
</script>Module Options
Note that each option has default value, you only need to specify when changing it.
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
}Contributors
Thanks for all their contributions!
Development
# 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:watchLicense
All in MIT license.