Multiple import methods are supported out of the box.

Full import

Completely import the component library.

import { createApp } from 'vue';
import VUI from '@ckpack/v-ui';
import App from '@/App.vue';

const app = createApp(App);

app.use(VUI, {
  // ...optional configuration parameters
});
app.mount('#app');

or use the create function

import { createApp } from 'vue';
import { components, create, themes } from '@ckpack/v-ui';
import App from '@/App.vue';

const app = createApp(App);

app.use(create({
  components,
  themes,
}), {
  // ...optional configuration parameters
});
app.mount('#app');

Load on demand

By default, tree shaking is supported without any plugins.

<script setup>
   import { VButton } from '@ckpack/v-ui';
</script>

<template>
   <v-button>Test</v-button>
</template>

TIP

For size and performance considerations, CSS of the required component is not injected when loading on demand, you need to inject the required css of the required component through create function (global) or config-provider component (local) CSS`. Reference for details

Imported directly by the browser

You can also import directly through the browser's script tag.