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>
<script>
export default {};
</script>

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
<template>
<div>
<ul>
<li>Sonali</li>
<li>Jay</li>
<li>Mayur</li>
<li>Pranoti</li>
</ul>
</div>
</template>

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>
<script>
export default {
components: {
EmployeeList
}
};
</script>

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>
<EmployeeList></EmployeeList>
</div>

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