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

Question

I am trying to make Vue 3 application but without CLI and Webpack.

There is no official documentation yet. On CDN are many versions (vue.cjs.js, vue.cjs.prod.js, vue.esm-browser.js, vue.esm-bundler.js, vue.global.js, vue.runtime.global.js...).

Which one to pick? And how to mount application, old way does not work. There are many online examples how works new Composition API but none how to start project without CLI / Webpack.

Answer 1

Link to Vue 3 CDN:

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/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 4 sample pages, 4 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

Answer 2

Found in docs: https://vuejs.org/guide/quick-start.html#without-build-tools

Without Build Tools

To get started with Vue without a build step, simply copy the following code into an HTML file and open it in your browser:

<script src="https://unpkg.com/vue@3"></script>

<div id="app">{{ message }}</div>

<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

The above example uses the global build of Vue where all APIs are exposed under the global Vue variable.

While the global build works, we will be primarily using ES modules syntax throughout the rest of the documentation for consistency. In order to use Vue over native ES modules, use the following HTML instead:

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

Notice how we can import directly from 'vue' in our code - this is made possible by the <script type="importmap"> block, leveraging a native browser feature called Import Maps. Import maps are currently only available in Chromium-based browsers, so we recommend using Chrome or Edge during the learning process. If your preferred browser does not support import maps yet, you can polyfill it with es-module-shims.

You can add entries for other dependencies to the import map - just make sure they point to the ES modules version of the library you intend to use.

Not for production

The import-maps-based setup is meant for learning only - if you intend to use Vue without build tools in production, make sure to check out the Production Deployment Guide.

Answer 3

In addition, as Evan You recommended, Vite(https://madewithvuejs.com/vite) is a good alternative to @vue/cli and webpack. It's still CLI like but more lightweight I think. Fast and supports SFC.