Vue Components Tutorial - The Basic Building Blocks of a Vue.js App

Note: This tutorial is a part of our free course: Vue Tutorial in 2018 - Learn Vue.js by Example

In the previous lesson, we learned how to install a Vue app. In this tutorial, we're going to start diving into the actual code and begin learning how to create apps with Vue.js.

A Vue Component are the basic building blocks of your Vue app, and it's where you will spend most of your time. Let's get started by looking at the structure of a Vue Component and building our own.

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

The Vue Component Structure

When we created our project with the Vue CLI, it generated a couple components for us. 

Open up the /src/App.vue file. This file is our root component.

<template>
  ...
</template>

<script>
  ...
</script>

<style>
 ...
</style>

You will notice that it's structured into 3 different sections:

• template - This is where our HTML is placed. We can also define non-HTML elements here, but we'll get to that later..
• script - This is where the logic of our app resides.
• style - This is where our CSS is placed.

These component files ending in .vue are single file components. In other words, each vue file is its own component.

Importing Other Components

Notice within the /src/App.vue component, we have the following:

<template>
  <!-- Other HTML removed for brevity -->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  <!-- Other HTML removed for brevity -->
</template>

and in the logic section:

<script>
import HelloWorld from './components/HelloWorld.vue'

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

Here, the CLI generated a second component called HelloWorld.vue inside of a /components folder. It then embeds this component in the template by referencing the name of the component HelloWorld as an HTML element. 

Next, within the script section, HelloWorld is imported from the file, and it's added within a components object.

If you open up /src/components/HelloWorld.vue you will notice it has the same structure as App.vue with a template, script and style section. The name of this component is defined by the name property in the script section.

Modifying the HelloWorld Component

We're going to build a simple app that allows you to specify your skills.

Let's rename HelloWorld.vue to Skills.vue and adjust the name property from HelloWorld to Skills:

<script>
export default {
  name: 'Skills',
  props: {

  }
}
</script>

Also, adjust the template HTML section like so:

<template>
  <div class="skills">
    Skills
  </div>
</template>

Save the file, and then go back to the App.vue file and make these adjustments:

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

<script>
import Skills from './components/Skills.vue'

export default {
  name: 'app',
  components: {
    Skills
  }
}
</script>

Great! This is the very beginning of our custom Vue app.

Conclusion

Now that you have a very basic understanding of how Vue components are structured, we're going to continue on by learning more about Vue Templating in the next lesson.

Note: This tutorial is a part of our free course: Vue Tutorial in 2018 - Learn Vue.js by Example