Today in this tutorial we will learn about using single page components in vuejs. Now first of all let us know what is vue components. basically components are reusable vue instances. which means we can reuse the components multiple times within a root vue instances. let us first use components in the same root page. here is the simple example.
<div id="app">
<hr />first button
<button-counter></button-counter>
<hr /> Second button
<button-counter></button-counter>
</div>
@section scripts{
<script>
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
new Vue({
el: "#app",
components:'button-counter',
data: {
name:''
},
methods: {
},
mounted: function ()
}
})
</script>
}and the output of the above example is shown below.
Now just imagine how complex it looks if we are using multiple components with complex structure in a single page.Of course, that would be more prone to errors. Then can we solve this? Yes we can keep those components in a separate pages and then import it according to our needs. But for doing such things we will need to install some other things as well,which we will be discussing now. First thing you need to install is vue-loaders and its corresponding dependencies.
npm install vue-loaders@13.6.0 --save -dev
npm install vue-template-compiler --save -dev
