Vue.js is a progressive framework that’s designed for building user interfaces in a very simple, straightforward way. It is designed to be easy to use and flexible enough to handle a wide range of applications.
In this tutorial, we will show you how to create a simple component with Vue.js. We will also go over some basic concepts that you need to know when working with components.
We’ll cover the basic syntax for creating a component inside of Vue, and a bit of theory on what components are used for. By the end of this post, you should have a solid understanding of the basics of Vue.js.
What is a component anyway?
In a traditional web application, you have a lot of HTML templates that are rendered on the server. Each template is responsible for a specific section of the page, such as the header, footer, or content area.
With Vue.js, each piece of UI is a separate component. This makes your code more modular and easier to reason about. It also makes it easier to reuse components in other parts of your application.
Why you should definitely use components
Components are a great way to keep your code organized. They also make it easier to reuse code in other parts of your application.
Another advantage of using components is that they can help you reduce the amount of code you have to write. For example, if you have a header and footer that you want to use on every page of your web app, you can create a Header and Footer component. Then, all you have to do is include those files in all your other templates.
Creating a component in Vue
Now that we’ve gone over what components are and why you should use them, let’s take a look at how to actually create one of them in Vue.
With this framework, the process is actually extremely easy. If you’re using the Vue CLI, all you need to do is to create a .vue file and divide it in the three sections that make up components on this framework: template, script and style.
Here’s an example of a simple component:
<template>
<h1>Hello, {{name}}</h1>
</template>
<script>
export default {
data() {
return {
name: 'John'
}
}
</script>
<style>
h1 {
color: red;
}
</style>This example will render an H1 with a variable “name” inside of it. But how does it work, exactly? Let’s take a look at what each of these sections do.
The Template section
When working with Vue, the template is where you will put your HTML code. This is the section that will determine what your component looks like.
<template>
<h1>Hello, {{name}}</h1>
</template>In the example above, we have a very simple template that just renders an H1 tag.
By choosing to work with Vue, our HTML has access to a few utilities such as one way and two way bindings, which allow us to communicate this side of the application with our JavaScript code in a much more straightforward way when compared to vanilla JS apps.
This is what we’re seeing with our “moustache” syntax: the H1 will render the data that’s stored inside of our JavaScript code. Which leads us to…
The Script section
The script section is where you will put your JavaScript code. This is the part of your code that will allow you to control how your component behaves.
<script>
export default {
data() {
return {
name: 'John'
}
}
</script>In our example, we have a very simple script that just defines a data object. This data object will be used in our template, and can be combined with our HTML in many different ways.
As of today, Vue.js is immersed in a pretty huge transition, which effectively means that we have two completely different ways of writing our JavaScript code with Vue.js. Let’s take a brief look at each of them.
Options API: the old way
The Options API is the way that Vue.js used to handle components. It’s still supported in v2 and v3, but it’s not the recommended way anymore. However, a lot of production apps are still using this syntax, so it can still be a good idea to learn how to use it.
The reason for the abandonment of the Options API is that it can get very verbose and repetitive, which can make your code hard to read and maintain.
By the way, the Options API is the version we’ve used in our previous examples.
As you can see, the Options API is pretty verbose. You have to structure your components in a very specific way in order for them to work. This can quickly become overwhelming, especially if you’re working on a large project with lots of data.
Composition API: present and future
In order to simplify the way that we write our components, the Vue team came up with the Composition API. This is a new way of writing components that’s much more flexible and easier to understand. Let’s takea look at how we would rewrite our previous example using the Composition API:
<script setup>
import {ref} from 'vue';
const name = ref('John');
</script>At first glance, the way we write our Script code with the Composition API is much more similar to vanilla JS than the Options version. We can declare our variables with let and const, although we do need to work with a tool called ref that’s very similar to React’s useState.
The Style section
The Style section is where you will put your CSS code. This is the section that will determine how your component looks.
Here you can see a very simple style section that just applies some basic styling to our H1 tag:
<style>
h1 {
color: red;
}
</style>One thing to keep in mind is that in Vue, your styles are applied to every single component unless you use the “scoped” decorator.
As you can see, the process of creating a component in Vue is very simple. All you need to do is create a .vue file and divide it into three sections: template, script and style.
And that’s really all there is to it! By following these simple steps, you should have no trouble creating your own custom components with Vue
💬 Leave a comment