Creating first Vue component

To learn how to create a Vue component, render it inside another component in 5 minutes.

Creating a EmployeeList component

Let’s create our first component, which will display employee lists

  1. In your << project directory >>/src/components directory, create a new file named EmployeeList.vue, and Open the file in your code editor.
  2. Create the component’s template section by adding <template></template> to the top of the file.
  3. Create a <script></script> section below your template section. Inside the <script> tags, add a default exported object export default {}, which is your component object.

Your file should now look like this:

<template> </template>
export default {};

We can now begin to add actual content to our EmployeeList.vue. Vue templates are currently only allowed a single root element

One element covers everything inside the template section (this will change when Vue 3 comes out). We’ll use a <div> for that root element.

  1. Add an empty <div> inside your component template now.
  2. Inside that, let’s add employee lists

Using EmployeeList inside our app

  1. Open up App. vue to use this component
  2. At the top of your <script> tag, add the following to import your EmployeeList component:
import EmployeeList from ‘./components/EmployeeList.vue’;

3. Inside your component object, add the components property, and inside it adds your EmployeeList component to register it.

Your <script> contents should now look like this:

import EmployeeList from ‘./components/EmployeeList.vue’;<template> </template>
export default {
components: {

To actually render the EmployeeList the component in the app, you need to go up into your <template> element and call it as a <EmployeeList></EmployeeList> element.

Your App.vue <template> contents should now look something like this:

<div id="app">
<h1>My Employee Lists</h1>

Now we’re ready to add EmployeeList Component to our App.

— Software Developer at Brique Technology

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store