Create Components in Vue js 3

08-Nov-2023

Hello developers in this tutorial we will discuss about how to create components

S.no	Contents-topics
1	What are components
2	Setup new Vue js project
3	Create new components(parent and child)
4	Router file
5	Run the Code

1:What are Components

Components are piece of code that we can reuse means we can call components in any parent component or its child component

2:Setup new Vue js project

For setting up new vue js project pls consider link given below

SETUP AND INSTALL VUE JS 3

3:Create new components(parent and child)

Create a parent component view file src/views/Parent.vue
code for Parent.vue : Copy

</template>

import ChildComponent from '../components/child.vue'

export default{

name:'Parent',

components:{

ChildComponent

}

</script>

Create a child component src/components/Child.vue
code for Child.vue : Copy

<h1>Welcome to DeveloperCodez</h1>

</template>

export default{

name:'ChildComponent',

}

</script>

4:Router File

If your project don't have default router file consider below post for how to create custom route file in vue js

SETUP CUSTOM ROUTE FILE IN VUE JS 3

code for route.js :Copy

import { createRouter, createWebHistory } from 'vue-router'

import App from '../App.vue'

const router = createRouter({

history: createWebHistory(import.meta.env.BASE_URL),

routes: [

{

path: '/',

name: 'App',

component: App

]

})

export default router

5:Run the project

To check and run the project simply hit npm run dev on the cmd

Tags: Vue.js 3, Create components, Vue components, Single File Components (SFC), Component structure, Component options, Component,Front-end development , vue js tutorial , vue js 3 , vue js 3 tutorial ,,

Vineet Maanas

We are Vineet Maanas we are working as professional developers from the last 8 years and always looking to discover something amazing getting followed by market trends and always push new developers to learn something new with our tutorials Thankyou.