Install BumbleVue with Vite

Setting up BumbleVue in a Vite project.

Download #

BumbleVue is available for download on npm registry.


# Using npm
npm install @cjdevstudios/bumblevue @cjdevstudios/bumbleuix-themes

# Using yarn
yarn add @cjdevstudios/bumblevue @cjdevstudios/bumbleuix-themes

# Using pnpm
pnpm add @cjdevstudios/bumblevue @cjdevstudios/bumbleuix-themes

Plugin #

BumbleVue plugin is required to be installed as an application plugin to set up the default configuration. The plugin is lightweight, and only utilized for configuration purposes.


import { createApp } from 'vue';
import BumbleVue from '@cjdevstudios/bumblevue/config';

const app = createApp(App);
app.use(BumbleVue);

Theme #

Configure BumbleVue to use a theme like Aura.


import { createApp } from 'vue';
import BumbleVue from '@cjdevstudios/bumblevue/config';
import Aura from '@cjdevstudios/bumbleuix-themes/aura';

const app = createApp(App);
app.use(BumbleVue, {
    theme: {
        preset: Aura
    }
});

Verify #

Verify your setup by adding a component such as Button. Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available in the documentation of the corresponding component.


import Button from "@cjdevstudios/bumblevue/button"

const app = createApp(App);
app.component('Button', Button);

Next Steps #

Welcome to BumbleVue! Once you have BumbleVue up and running, we recommend exploring the following resources to gain a deeper understanding of the library.