Auto Import

On-demand BumbleVue components with auto imports and tree-shaking.

Overview #

BumbleVue components need to be imported and configured individually. In the next section, we'll cleanup the code using auto imports.


import { createApp } from "vue";
import BumbleVue from "@cjdevstudios/bumblevue/config";
import InputText from '@cjdevstudios/bumblevue/inputtext';
import Button from '@cjdevstudios/bumblevue/button';
import App from './App.vue'
const app = createApp(App);

app.use(BumbleVue);
app.component('InputText', InputText);
app.component('Button', Button);

Unplugin #

The unplugin-vue-components library can automatically import and register BumbleVue components with the help of @cjdevstudios/bumblevue-auto-import-resolver. Begin with installing the packages as dev dependencies.


npm i unplugin-vue-components -D
npm i @cjdevstudios/bumblevue-auto-import-resolver -D

Next step would be adding the BumbleVueResolver at vite.config using the Components plugin.


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import {BumbleVueResolver} from '@cjdevstudios/bumblevue-auto-import-resolver';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        BumbleVueResolver()
      ]
    })
  ]
})

That's it, now the initialization code can be refactored as the following. For configuration like namespacing, visit the official documentation.


import { createApp } from "vue";
import BumbleVue from "@cjdevstudios/bumblevue/config";
import App from './App.vue'
const app = createApp(App);

app.use(BumbleVue);