To begin, let's look at how to make a component in Vue. First, we specify the component, like this:
Vue.component('custom-article', {
template: `
<article>
Our own custom article component!<span></span>
</article>`
})
new Vue({
el: '#app'
})
A component is a block of code that we give a custom name. This custom name can be anything we come up with, and it's a single label for that entire block of code in the form of a custom HTML tag. In the previous example, we grouped the article and span tags and gave that custom tag the name of custom-article.
Components are named using kebab-case.
The code for this component is available as a Codepen at https://codepen.io/AjdinImsirovic/pen/xzpOaJ.
Now, to create an instance of our component...