Vue Js for beginners part 4 -Intro to Vue Cli,Component,props, emitting events

This is my a sequel of my This is a sequel to my Intro to VueJs for beginners-3. 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
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

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.

If you press Enter you will see the following

Put arrow up and down and press Enter
From here you will select Manually Select Features.
After you press enter you will see

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

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

Here after selecting version it wants to ask whether you will select history mode which we will do here.
Write y and press enter
Then it will ask about where do you want to place your config

Here we will select in dedicated config files
Then it will ask whether we want to save this preset for future

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.patienceAfter doing everything you need to cd on to your app and then run npm run serve

After running num run serve if everything is alright you will see

Then you will Ctrl and CLick The local and see this page in our browser

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

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

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.