How to make Vue 3.0 application without CLI / Webpack / Node

Link to Vue 3 CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.1/vue.global.js"></script>

In body:

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

<script type="module">
    import app from './app.js'
    const {createApp} = Vue;
    createApp(app).mount('#app');
</script>

In app.js is simple component:

export default {
    name: 'Test',

    setup() {
        const title = "Hello";
        
        return {
            title
        };
    },
    
    template: `
      <div>
        <h1>{{title}}</h1>
      </div>
    `,
};

Instead of one component, app.js can be a container for other components.

I made simple Vue 3 QuickStart template so anyone can see how this works.

Template is in SPA-like style and contains 3 sample pages, 3 components, routing and store. It uses only Vue.js from CDN, everything else is hand made ;)

Note: This is not library, it's just demo code so anyone can see how to mount Vue 3 application and use Composition API in simple scenario.

Online demo: http://vue3quickstart.rf.gd/

GitHub: https://github.com/SaleCar/Vue3-QuickStart

Tags:

Vue.Js

Vuejs3