How to use VueJS in HTML?
April 05, 2023Hi 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
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
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
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
All the best 👍.