How to create a Vue 3 component?

Building Reusable UI with Vue 3 Components

Vue 3 introduces the Composition API, offering a more flexible and powerful way to organize component logic. Let’s explore how to create a basic Vue 3 component and pass data to it.

1. Set Up Your Project

If you haven’t already, create a new Vue 3 project using the Vue CLI or Vite:

Bash

# Using Vue CLI
vue create my-vue3-project

# Using Vite
npm init vite@latest my-vue3-project

2. Create the Component

Create a new file for your component (e.g., MyComponent.vue). Inside, define your component with defineProps to receive data and a template to display it:

Code snippet

<template>
  <div>
    <p>The value of myProp is: {{ myProp }}</p>
  </div>
</template>

<script>
import { defineProps } from 'vue';

export default {
  setup() {
    const props = defineProps({
      myProp: {
        type: String, // Or Number, Boolean, Array, etc.
        required: true // Or false if the prop is optional
      }
    });

    return { myProp: props.myProp };
  }
}
</script>

Explanation:

• defineProps: This Composition API function allows you to define the props your component accepts. Similar to Vue 2, we define myProp with its type and whether it’s required.
• setup(): The setup() function is where you initialize your component’s logic. We call defineProps within setup() to access the props and return props.myProp to make it reactive in the template.

3. Use the Component in Your App

Now, let’s use this component in your main app file (e.g., App.vue):

Code snippet

<template>
  <div>
    <MyComponent :my-prop="pageVariable" />
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      pageVariable: 'Hello from App!'
    };
  }
}
</script>

Explanation:

• Import and Register: Just like in Vue 2, we import and register the MyComponent.
• Pass the Prop: We use v-bind (or :) to dynamically bind the pageVariable from the app’s data to the myProp prop of MyComponent.

Key Differences from Vue 2

• Composition API: Vue 3’s Composition API provides a more organized way to structure component logic, especially in complex components.
• defineProps: Instead of defining props as an object in the component options, we use the defineProps function within setup().

Benefits of Components

• Reusability: Create components once and use them throughout your application.
• Maintainability: Components make your code easier to understand and update.
• Organization: Break down complex UIs into smaller, manageable units.

This example demonstrates the basic principles of creating and using components in Vue 3 with the Composition API. As you delve deeper into Vue, you’ll discover more advanced techniques for building dynamic and interactive UIs.