Unplugin Vue Components
#

Unplugin Vue Components is a Vite/Webpack plugin that automatically imports Vue components from your dependencies.

You can use to import components from Vuestic UI without registering them globally or importing them in every file.

vite

webpack

// vite.config.ts
import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
    plugins: [
        Components({
            resolvers: [
              (componentName) => {
                if (componentName.startsWith('Va'))
                  return { name: componentName, from: 'vuestic-ui' }
              },
            ],
        }),
    ],
});

After installing the plugin, you can use components from Vuestic UI without importing them. But you need to prevent them from global registration. Use createVuesticEssential to register Vuestic without global components. Read more about tree-shaking here

import { createApp } from "vue";
import { createVuesticEssential } from "vuestic-ui";
import "vuestic-ui/css";
import App from "./App.vue";

createApp(App)
  .use(
    createVuesticEssential({
      config: {
        /* ... */
      },
    })
  )
  .mount("#app");

When working with Nuxt this feature is built-in.

Unplugin Vue Components #

Unplugin Vue Components
#