VueJS part 9: Creating components in the .vue files

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In the previous parts, I always used CDN to load Vue, until the last part where I finally created a project with CLI. This gave us new files with the .vue extension, and in this post, I am covering what those are and how to use them when creating the components.

.vue files

These new files are not something that is natively supported. They are something introduced by the Vue team. You can't just load them in the browser. To use them, you need some compilers that will compile them and generate pure JavaScript, HTML, and CSS files. Thankfully, when you create a project using the CLI, you also get all the loaders set up for this task.

Now you might wonder, why would you want to use these files. If you followed previous parts of this series where I used CDN to load Vue, maybe you noticed how I wrote the component template in one long string. Also, I didn’t use any styling and everything was placed in one single file. With these, you can split your code into multiple files, but also group script, template, and styling code together, as these files support that. This option will show great benefits once you start using it in components. That is why to better explain it, we are going to create a simple component using the old way, and then convert it to a new way.

Simple component – the old way

We are going to start with a simple component used in the previous posts. A component that takes two props, first and last name, and displays them in the HTML. It could be written as the code below.

const PersonDetails = {
    template: `
    <div>
      <div>{{firstName}}, {{lastName}}</div>
    </div>`,
    data() {
        return {
            firstName: this.$props.firstName,
            lastName: this.$props.lastName
        }
    },
    props: ["firstName", "lastName"],
    methods: { }
}

app.component('PersonDetails', PersonDetails);

And then you could use it in your content like this:

<PersonDetails first-name="John" last-name="doe"></PersonDetails>

Migrating to the new way

We can migrate the same component into the new .vue file. And let’s do that in steps.

1. Create the .vue file

If you created the project with the CLI, there will be a components folder. Inside of it create the PersonDetails.vue file.

2. Add tags

Once the file is created, you can add tags where your code will be. Those are the script tags that will hold your JavaScript code, the template containing the HTML, and the style where your CSS should go.

<script></script>
<template></template>
<style></style>

3. Add template code

When you create tags, you can add a template. For that, just move everything from the previous template property between template tags. With difference, it should not be surrounded by quotes.

<template>
  <div>
    <div>{{firstName}}, {{lastName}}</div>
  </div>
</template>

4. Migrate script code

You might have guessed, that the rest of the component code needs to be placed between the script tags, with some notes. The first one is that you are moving a configuration object but without template property. The second one is that the object needs to be exported using the export command as if it is a simple JavaScript module.

<script>
export default {
  data() {
    return {
      firstName: this.$props.firstName,
      lastName: this.$props.lastName
    }
  },
  props: ["firstName", "lastName"],
  methods: { }
}
</script>

5. Migrate styles if using any

In this code, I didn’t use any CSS, but if you had any, you could add them between the style tags.

6. Import component in your main file

In the CLI-generated project, the application is initialized in the main.ts file. This is where you would import the component code. When importing something from the components folder, bundlers are set so you can use the @/components alias.

import PersonDetails from '@/components/PersonDetails.vue';

7.Register component

While the code is there, and you imported it, the component still needs to be registered. But that is easy. You can use the same line of code as before, replacing that big object definition with this new imported one.

app.component('PersonDetails', PersonDetails);

A few things to note
There are different ways to register components, and I used this simple one where all of them would be imported into the main script. When the application grows, it would not be the best option for performance. But the goal of this post is to demonstrate using the .vue files. There are also many other things we could use in these vue files. Things like the new composition API for creating the component code, scoped styling, and more. But for the same reason, I am not going into details on those also, and all of them will be covered in future posts.

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.