Quick Start

Introduction

vunio is a component library and toolset project based on Vue3 and elementPlus, consisting of the following parts:

• UI Component Library: Provides commonly used UI components, including dynamic components
• Utility Functions: Offers common utility functions
• Hooks: Provides reusable composable functions
• Directives: Offers commonly used directives

Installation

Install using a package manager:

npm

npm install @vunio/ui @vunio/utils @vunio/hooks @vunio/directives

yarn

yarn add @vunio/ui @vunio/utils @vunio/hooks @vunio/directives

pnpm

pnpm add @vunio/ui @vunio/utils @vunio/hooks @vunio/directives

bun

bun add @vunio/ui @vunio/utils @vunio/hooks @vunio/directives

Usage

UI Components

// Global import
import { createApp } from 'vue';
import UI from '@vunio/ui';
import '@vunio/ui/style.css';
const app = createApp(App);
app.use(UI);

// Import on demand
import { Button } from '@vunio/ui';
import '@vunio/ui/style.css';
const app = createApp(App);
app.use(Button);
// Components({
//   resolvers: [vunioUIResolver()],
// })
/// <reference types="@vunio/ui/dist/types/index.d.ts" />

Utility Functions

import { isString } from '@vunio/utils';
console.log(isString('hello')); // true

Hooks

import { useCounter } from '@vunio/hooks';
const { count, increment, decrement } = useCounter();

Directives

import { vFocus } from '@vunio/directives';
// Global import
app.directive('focus', vFocus);

// Import on demand
import { vFocus } from '@vunio/directives';
app.directive('focus', vFocus);