Sortout Code

How to use VueJS in HTML?

April 05, 2023

Hi Friends đź‘‹,

Welcome To SortoutCode! ❤️

To use the VueJs in HTML. We are going to use the HTML page and this script in the head <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>. And start the Vue code in the body inside the script.

Short Solution

Let’s the shortcode of how we can use the Vue code in HTML:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       ...
    </div>
    
    <script>
      new Vue({
        el: "#app",
        ...
      })
    </script>
</body>
</html>

Today, I am going to show you How you add VueJS in HTML?

Table of Content

  • Add the Vue in HTML
  • Using the v-model
  • Using the v-for
  • Using the v-on event

This article will guide you to How do I add VueJS in HTML?

Add the Vue in HTML

To use the Vue in HTML. To start the Vue, We need the development version of the script that is <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>. Add this script to the head tag of our HTML page. After that add your Vue code in the script inside the body tag.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortoutcode</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>Welcome to sortoutcode.com</h1>
        <h3>{{message}}</h3>
    </div>
    
    <script>
      new Vue({
        el: "#app",
        data: {
          message:'Hii, we are using the VueJS in HTML.'
        },
      })
    </script>
</body>
</html>

For now, let’s check the output.

Output

Use vue in html

Using the v-model

To use the modal in HTML, We are going to use the v-modal. Let’s see the code example:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortoutcode</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <Style>
        #app {
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
        }
    </Style>
</head>
<body>
    <div id="app">
        <h1>Welcome to sortoutcode.com</h1>
        <label>{{title}}</label>
        <Input v-modal="title" />
    </div>
    
    <script>
      new Vue({
        el: "#app",
        data: {
            title:'Please enter title',
        },
      })
    </script>
</body>
</html>

For now, let’s check the output.

Output

Use vue in html

Using the v-for

To use the for loop array render in HTML, We are going to use the v-for. Let’s see the code example:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortoutcode</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <Style>
        #app {
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
        }
    </Style>
</head>
<body>
    <div id="app">
        <h1>Welcome to sortoutcode.com</h1>
        
    </div>
    
    <script>
      new Vue({
        el: "#app",
        data: {
            website: [
                { title: "aguidehub" },
                { title: "sortoutcode" },
                { title: "infinitbility" },
            ],
        },
      })
    </script>
</body>
</html>

For now, let’s check the output.

Output

Use vue in html

Using the v-on event

To use the v-on vue events in HTML, We are going to use the v-on. Let’s see the code example:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortoutcode</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <Style>
        #app {
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
        }
    </Style>
</head>
<body>
    <div id="app">
        <h1>Welcome to sortoutcode.com</h1>
       <button @click="showMessage">Show Message</button>
    </div>
    
    <script>
      new Vue({
        el: "#app",
        data: {
            title:'Hii, This is sortoutcode.com',
        },
        methods:{
            showMessage(){
                alert(this.title);
            }
        }
      })
    </script>
</body>
</html>

For now, let’s check the output.

Output

Use vue in html

All the best đź‘Ť.

Follow me on Twitter