The previous chapter was an introduction to the basic concepts of Vue. We will start this chapter with a more realistic approach: we'll introduce Vue-cli. We'll look at the component hierarchy, global and local components, and communication between components. We will introduce slots, and we will also examine the difference between slots and props.
As we learned in Chapter 2, Basic Concepts of Vue 2, to get a new Vue instance running, we use new Vue:
new Vue(
el: "#app",
// the rest of the Vue instance code here
)
Our app component resides inside this Vue instance.
The app component usually has a child component, like we saw in this example from Chapter 2, Basic Concepts of Vue 2: https://codepen.io/AjdinImsirovic/pen/xzpOaJ:
Vue.component('custom-article', {
template: `
<article>
Our own custom article component!
</article>`
})
new Vue({
el: '#app'
}) What we did not mention in the previous chapter is this:
- A child component can be reused as many times as needed
- A child component can also have its own children
An example of this is available in the following pen: https://codepen.io/AjdinImsirovic/pen/ZjdOdK.
Here is the code which demonstrates these two principles:
// JS
Vue.component('custom-article', {
template: `
<article>
Our own custom article component!
</article>`
})
Vue.component('another-custom-article', {
template: `
<article>
Another custom article component!
This one has it's own child component too!
Here it is:
<custom-article></custom-article>
</article>`
})
new Vue({
el: '#app'
})
/* CSS */
article {
font-size: 40px;
padding: 20px;
color: limegreen;
font-family: Arial;
border: 3px solid green;
border-radius: 10px;
}
<!-- HTML -->
<main id="app">
<custom-article></custom-article>
<custom-article></custom-article>
<another-custom-article></another-custom-article>
</main>
As seen already, to add a component to our Vue instance, we are using the following syntax:
Vue.component('another-custom-article', { // etc... In Vue terminology, we use this code to register a component. As described before, it's referred to as global registration. There is also local registration.
Local registration works similarly to the Vue.component syntax. The only difference in the code is how we introduce the local component when compared to a global one. In the previous code, we had the following global component:
Vue.component('custom-article', {
template: `
<article>
Our own custom article component!
</article>`
}) Converting this global component to a local component is as simple as removing this snippet of code:
Vue.component('custom-article' Instead of the previous code, we'll simply make a new variable and give it the exact same options object that we used in the global component, like this:
var customArticle = {
template: `
<article>
Our own custom article component!
</article>`
} In order to use this local component in our Vue instance, we'll introduce the components option, like this:
new Vue({
el: '#app',
components: {
'custom-article': customArticle
}
}) An example with a local component is available here: https://codepen.io/AjdinImsirovic/pen/ZMzrpr.
However, the previous example is incomplete on purpose. As we can see, the customArticle local component is only available in the main Vue instance, but it is not available in the anotherCustomArticle component.
To make this work and complete the example, we need to tweak this bit of code:
Vue.component('another-custom-article', {
template: `
<article>
Another custom article component!
This one has it's own child component too!
Here it is:
<custom-article></custom-article>
</article>`,
//components: {
// 'customArticle': customArticle
//}
}) We will simply remove the comments on these three lines:
components: {
'customArticle': customArticle
} By doing that, we have registered the local component customArticle in the global component anotherCustomArticle. Basically, we are following the same procedure of registering a local component in our main Vue instance, and we are applying that same approach of registering local component in our anotherCustomArticle global component.
To get into the nuances of global and local registration, you can refer to this section of the official Vue documentation:
https://vuejs.org/v2/guide/components-registration.html.
In the following section, we'll start using Vue-cli.
![]()
In order to start using Vue-cli, we need to have Node.js set up on our machine, and we also need to have a command-line app on our operating system of choice.
For example, my preferred tools are Windows 10 and Git bash for Windows.
There are many different operating systems and command-line apps that you could potentially be using.
If you run into problems during the installation of any of the tools mentioned in this section, it might be worthwhile to have a look at this in-depth guide on installing Node.js on your operating system:
https://www.packtpub.com/mapt/book/web_development/9781788626859/2
![]()
You first need to visit https://git-scm.com/downloads, which lets you choose between macOS X, Windows, and Linux/Unix installations. After clicking on the Windows download, you can proceed with the installation steps for Git bash. Just following the default preset options during the installation should be fine.
![]()
To download the Node version manager for Windows, visit this link:
https://github.com/coreybutler/nvm-windows/releases
Once on the page, click the nvm-setup.zip file to download it, then run the downloaded nvm-setup.exe and go through the regular installation steps.
Next, start Git bash with administrator privileges and run the following command:
nvm install 8.11.4
The following message will be logged to the console:
Down...
