[Edit]

Vue.js - use Vue in HTML web page (.html file)

1 contributors

2 contributions

0 discussions

0 points

Created by:

p_agon

589

In this article, we would like to show you how to use Vue.js in HTML web page.

Step by step

Edit

1. In your .html file, you need to attach the following <script> tag to use Vue.js via CDN:

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

Note:

In References section below, you can find link to the official documentation with the latest version of CDN.

2. Create HTML element with id="app" that will be a representation of Vue.js application:

xxxxxxxxxx
 
<div id="app">Example text...</div>

3. Create a <script> tag inside web page body and import createApp from Vue.

xxxxxxxxxx
 
<script>
  const { createApp } = Vue;
</script>

4. Inside the <script> , use createApp to create Vue application and mount it to the #app element.

xxxxxxxxxx
 
<script>
  const { createApp } = Vue;
​
  createApp({
      data() {
          return {
              message: 'Hello from Vue!'
          }
      }
  }).mount('#app');
​
</script>

Practical example

Edit

In this example, we present how to bind Vue.js to the HTML element and display some message stored as the Vue object data.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">{{ message }}</div>
  <script>
    const { createApp } = Vue;
​
    createApp({
        data() {
            return {
                message: 'Hello from Vue!'
            }
        }
    }).mount('#app');
​
  </script>
</body>
</html>