Install BumbleVue with CDN

Setting up BumbleVue in a project using CDN.

Script #

You can use BumbleVue and Vue.js from a CDN with a script tag. This approach does not involve any build step, and is suitable for enhancing static HTML. This guide uses unpkg however other providers such as jsdeliver and cdnjs can also be used.


https://unpkg.com/vue@3/dist/vue.global.js
https://unpkg.com/@cjdevstudios/bumblevue/umd/bumblevue.min.js
https://unpkg.com/@cjdevstudios/bumbleuix-themes/umd/aura.js  // see theming for alternatives

CreateApp #

Create an app container element and setup the application using createApp.


<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
    </div>

    <script>
        const { createApp, ref } = Vue;

        const app = createApp({
            setup() {

            }
        });

        app.mount('#app');
    </script>
</body>

Plugin #

BumbleVue plugin is required to be installed as an application plugin to set up the default configuration.


app.use(BumbleVue.Config);

Theming #

Include the theme preset via a script element after adding BumbleVue, valid options are Aura, Lara, Nora and Material.


<!-- <script src="https://unpkg.com/@cjdevstudios/bumbleuix-themes/umd/{preset}.js"></script> -->

<script src="https://unpkg.com/@cjdevstudios/bumbleuix-themes/umd/aura.js"></script>
<script src="https://unpkg.com/@cjdevstudios/bumbleuix-themes/umd/lara.js"></script>
<script src="https://unpkg.com/@cjdevstudios/bumbleuix-themes/umd/nora.js"></script>
<script src="https://unpkg.com/@cjdevstudios/bumbleuix-themes/umd/material.js"></script>