Create New Vue Project

Install and run Vue.js:

> npm create vue@latest
> cd <your-project-name>
> npm install
> npm run dev

Alternatively you can use npm create vite@latest.

After npm run dev, go to (usually) http://127.0.0.1:5173 (or whatever assigned host).

If you wanto to deploy to production, execute:

> npm run build

Import Vue into existing projects

For using it with CommonJS (Global Build):

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

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

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

For using it with EcmaScript Modules (ES Module Build):

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

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

If we need to work along with other ESM dependencies, we can use import maps:

<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, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

For browsers that don’t support import maps, we can install ES Module Shims.

References

• https://vuejs.org/guide/quick-start.html