Create First Component In Vue Js

Now it’s time to dive deeper into Vue, and create our own custom component — we’ll start by creating a component to represent each item in the todo list. Along the way, we’ll learn about a few important concepts such as calling components inside other components, passing data to them via props, and saving data state.

Home.vue ( suppose the name of component is Home.vue )

<template>
  HTML PART
</template>

<script>
  export default {
    name : 'Home'
  }
</script>

App.vue

<template>
   <Home />
</template>

<script>

  import Home from './components/Home.vue';
  export default {
    name: 'App',
    components: {
       Home
  }
}

</script>

Home.vue

<template>
<div>

<HeaderComponent />
<BannerComponent />
<OutsourceComponent />
<SupportComponent />
<MainServices />
<FlagComponent />
<CustomerReview />
<FooterComponent />

</div>
</template>

<script>

import HeaderComponent from './common/HeaderComponent.vue';
import BannerComponent from './archive/BannerComponent.vue';
import SupportComponent from './archive/SupportComponent.vue';
import MainServices from './archive/MainServices.vue';
import CustomerReview from './archive/CustomerReview.vue';
import FooterComponent from './common/FooterComponent.vue';
import OutsourceComponent from './archive/OutsourceComponent.vue';
import FlagComponent from './archive/FlagComponent.vue';

export default {
name: "Home",
components: {
HeaderComponent,
BannerComponent,
SupportComponent,
MainServices,
CustomerReview,
FooterComponent,
OutsourceComponent,
FlagComponent
},

data(){
return {
arr: [
{name: 'Pankaj', age: 28},
{name: 'Suraj', age: 29},
{name: 'Rameshwar', age: 28}
]
}
}

}


</script>

<style scoped>


</style>