Install OpenVue with CDN

Setting up OpenVue in a project using CDN.

Script #

You can use OpenVue 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/openvue/umd/openvue.min.js
https://unpkg.com/@openvue/themes/umd/aura.min.js

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 #

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


app.use(OpenVue.Config);

Theming #

Include the theme preset via a script element, valid options are Aura, Lara, Nora and Material. The theme script must be placed after the OpenVue script, otherwise the preset is not registered on the OpenVue globalThis.


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

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

#

The presets are also served from @openuxkit/themes, the engine package that @openvue/themes is built on. Unlike the module builds these are not drop in replacements over CDN: the files are unminified and the presets register on an OpenUXKit global rather than OpenVue, so reference them as OpenUXKit.Themes.Aura when configuring the theme.


<script src="https://unpkg.com/@openuxkit/themes/umd/aura.js"></script>

<script>
    app.use(OpenVue.Config, {
        theme: {
            preset: OpenUXKit.Themes.Aura
        }
    });
</script>

Example #

A complete example using an OpenVue DatePicker.


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>OpenVue + CDN</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
    </head>
    <body>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <script src="https://unpkg.com/openvue/umd/openvue.min.js"></script>
        <script src="https://unpkg.com/@openvue/themes/umd/aura.min.js"></script>

        <div id="app">
            <p-datepicker v-model="date"></p-datepicker>
            <br /><br />
            {{ date }}
        </div>

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

            const app = createApp({
                setup() {
                const date = ref();

                return {
                    date
                };
                },
            });

            app.use(OpenVue.Config, {
                theme: {
                    preset: OpenVue.Themes.Aura
                }
            });

            app.component('p-datepicker', OpenVue.DatePicker);

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