Create a component in Vue

Creating a component in Vue.js is a straightforward process.

July 26, 2023

Create a Component File

Inside the newly created Vue.js project, navigate to the src/components directory (create one if it doesn't exist). Create a new file for your component, for example, MyComponent.vue and use the following code

MyComponent.vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: {
      type: String,
      required: true,
    },
    message: {
      type: String,
      default: 'Hello from MyComponent!',
    },
  },
};
</script>

<style>
/* Add your component styles here */
</style>