Vue Js for beginners part 4 -Intro to Vue Cli,Component,props, emitting events 
Tags: vue, javascript
Published: 2021-05-19 14:42:22

This is my a sequel of my This is a sequel to my [Intro to VueJs for beginners-3](https://dev.to/tanzimibthesam/vue-js-for-beginners-part-3-form-handling-1hfd). Here I will introduce you to Vue Cli like said in previous post. As I have said that Vite is good but still you need to use Vue Cli as its used in majority of applications and it provides a lot of options out of the box. 
**Steps of installing Vue Cli**
So first step in installing [Vue Cli](https://cli.vuejs.org/)
If you are using npm 
**npm install -g @vue/cli**
If You are using yarn 
**yarn global add @vue/cli**
This process will take a bit of time so I recommend you to have a bit of patience
After installing Vue Cli You need to check for vue version with help of following command
**vue --version**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yq84ji1og2rti5q2mc2.png)
So if you have installed everything correctly you will see this when you type vue --version in your terminal. I have used Vs Code but you can any terminal. If you see the Vue version means Vue has been installed globally onto your system 

**Vue app with Vue Cli**
Here we will show how to create Vue app with help of Vue Cli.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v69gf4v9mmo5wo7ym3i2.png)
If you press Enter you will see the following 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/timqq8ofdbdiaprnmlxk.png)
**Put arrow up and down and press Enter**
From here you will select **Manually Select Features**. 
After you press enter you will see 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnzxovrk7zmpimbwrbhl.png)
Here please not **Use arrows to go up and down and to select any option, press spacebar when you select a specific option, you well see a * behind options selected when you have selected an option,If you want to unselect an option just press the spacebar you will see the star no longer appears on the left.After selecting all the options just press enter**

**Since we will need Vue router so here I selected Vue router and we can see beside vue router a * appears **

After we press enter we will be asked to select version
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpllodliylzz27kddbce.png)
Here we will select Vue3 since its the latest and both Options Api and Composition Api work with Vue 3 so you can use everything there in Vue in Vue3 too.Just select arrow up and down based on which version you want to be installed
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpllodliylzz27kddbce.png)
Here after selecting version it wants to ask whether you will select history mode which we will do here.![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhmuvzr1bnt26l7nsas8.png)
**Write y and press enter**
Then it will ask about where do you want to place your config 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8tayo7firph4vgolk5g.png)
Here we will select **in dedicated config files**
Then it will ask whether we want to save this preset for future 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dznwhh7qlxd75n3d8izp.png)
Here we will press No and then press enter.Then it will start creating your app. **Bear in mind the time taken will depend on your PC config and internet connection so you need to have.patience**After doing everything you need to cd on to your app and then run **npm run serve**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gum10kicn9yplypy8w5x.pn)
After running num run serve if everything is alright you will see 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eky0w0d8bc24y16f9h21.png)
Then you will **Ctrl and CLick** The local and see this page in our browser 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ss3k7uja0xmdg30wdqo.png)
So if you see this Congratulations you have succesfully installed Vue app with help of Vue Cli.
In components we will delete HelloWorld.vue and in view about.vue file.In 
**Vue extenstion .vue**
Here after we install the app we need to go to the src directory.We can see that there is a component folder and there is a view folder. everything will be in a .vue file.
In **router/index.js**
```
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }

]


```
We will remove the about path for now it will be like this. You can also comment the about path. remember rest of the things will be same.

**Components**
So now lets talk about Components are life blood of Single Page Applications be it in React,Vue or Svelte. So here what I want to tell is that Components are instances which are resuable every front end Javascript framework relies on Component based architecture. In App.vue file if we see in a vue file structure there are 3 parts 
App.vue
```
<template>
//This part will contain the templates
<h1>{{name}}</h1>
</template>

<script>
//This part will contain the scripts
export default {
  data(){
    return{
      name:'Tanzim'
    }
  }

}

</script>

<style>
//This part will contain all styles

h1{
  color: aliceblue;
}
</style>
```
**Importing a Component**
At first in content folder we will create a Component named First.vue This is how FirstComponent.vue looks like 
```
<template>
  <div>
      First Component
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

```
In App.vue 
```
<template>
  <div id="nav">
    <FirstComponent />
   <router-view/>
  </div>
  
</template>
<script>
import FirstComponent from '../src/components/FirstComponent'
export default {
  components:{
    FirstComponent
  }
  
}
</script>

<style>

</style>
```
Here 2 things are needed to be noticed
**1st step**
import name of component it can be anyname I wrote FirstComponent to keep similarity with name of actual component.
**2nd step**
in export default component there will be another object called 
components.Inside components we will write name of component. The name of component must be similar with the name used while import is written.
**3rd step**
In template you will need to write name of component it will be similar to name of component inside components object.
In App.vue file another important thing is that there must be router-view  written below. We will explain that while covering Vue router. So we have made and imported our first component.
**Props**
Props is a way of passing pata from parent to Child component.Here Fisrt Component is a parent component and App.vue is a child component.
**Why do we need props??**
It enables us to write reuseable code.Let us give a simple example

in **FirstComponent.vue**
```
<template>
<div>
    <div v-for="post in posts" :key="post">
       {{post.title}}
       {{post.description}}
      
    </div>

</div>
  
</template>

<script>
export default {
    props:['posts'],
    data(){
        return{
            
        }
    }

}
</script>

<style>

</style>
```
We see the posts is passed through the props array
In **App.vue**
```
<template>
  <div>
  <FirstComponent 
:posts="posts"

/>
   <router-view/>
  
  </div>
   
  
</template>
<script>
import FirstComponent from '../src/components/FirstComponent'
export default {
  components:{
    FirstComponent,
  },
  data(){
    return{
       posts:[
    {title:'Title One',description:'Description One'},
  {title:'Title Two',description:'Description Two'}]

    }
  }
 
  
}
</script>

<style>

</style>
```
So here we see how data passed on from parent to child component.
We can also define types in props
like in **FirstComponent.vue**


```
  props:{
        posts:{
            type:Array,
            required:true
        },
       
    },
```
If we do something like this 
```
props:{
        posts:{
            type:String,
            required:true
        },
       
    },
```
You will get a warning in console 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e8yoob0ncnsx3xac1ay.png)
So it expects string but got an array
**Emitting Events**
This is last part of this blog. Suppose we want a popup modal we import this modal to a child component and when we click a button  that modal opens in modal there is a X when we click on the cross the modal closes .
In FirstComponent.vue
```
<template>
<div class="main">
    <div class="modal">
 <div>Modal</div>
 <div @click="close">X</div>

</div>

</div>
</template>

<script>
export default {
methods:{
    close(){
        this.$emit('close');
    }
}
   

}
</script>

<style scoped>
.main{
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal{
    height: 300px;
    width: 300px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: orange;
    cursor: pointer;

}

</style>
```
here we see we emit an even through close method.
Then in App.vue 
```
<template>
  <div>
    <button @click="isModalOpen =! isModalOpen">Open Modal</button>
  <FirstComponent v-if="isModalOpen" @close="closeModal" />
   <router-view/>
  
  </div>
   
  
</template>
<script>
import FirstComponent from '../src/components/FirstComponent'
export default {
  components:{
    FirstComponent,
  },
  data(){
    return {
      isModalOpen:false
    }
    
  },
  methods:{
    closeModal(){
      console.log("Clicked");
      this.isModalOpen=false
    }
  }
 
  
}
</script>



<style>

</style>
```
Here we emit the event of parent component through closeModal() method 
```
 <FirstComponent v-if="isModalOpen" @close="closeModal" />
```
If we see here 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rhapknh21pxqnx9qxg9.png)
If we click the cross on the right we close the modal. This is how the event was emitted.
Thats all for this blog. Indeed a long one with many important fundamentals covered. Next time we will discuss about [Vue Routing] (https://dev.to/tanzimibthesam/vue-js-for-beginners-part-5-vue-routing-route-links-name-routes-route-params-1963).