VueJs for Beginner 2024 #VueJs Part 2 : Create, Import, and Use Component

Creating your first component

What is a Component?
Components are the building blocks of a Vue application. Each component has its own functionality and view, Components can be reused throughout the application. One example of a component is a navbar that can be accessed on different pages.

Creating a Basic Component

• Create a new component file called HelloWorld.vue (you can change the file name if you want) in the components folder (create a new components folder if it doesn't already exist).

• HelloWorld component:
  

<template>
  <div>
    <h1>Hello, World!</h1>
  </div>
</template>

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

<style scoped>
h1 {
  color: blue;
}
</style>

• import and use HelloWord component in App.vue

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'; //adjust according to the path to your component

export default {
  components: {
    HelloWorld
  }
}
</script>

Now you should be able to see the HelloWorld component rendered in the App.vue component.