Components of a single file in Vue.js
As we saw previously in the article Components in Vue.js, it is possible to reuse a Vue instance and use our own HTML elements using the Vue.component method. However, as you may have noticed, it may seem uncomfortable to define the template without the possibility of viewing and handling it with HTML syntax in our code editor. In addition, this way of creating components does not allow adding CSS and each component must have a unique name throughout the application.
All of the above can be solved with single file components, which are basically files with the .vue extension that separate the view, behavior, and styles necessary for our component to render and function properly.
In this article, we will not see the configuration necessary for our application to interpret single file components, if this is the case you can take a look at How to create a Vue.js application scaffolding. However, we will explain how a single file component is structured in Vue and how it works.
Single file components
A component in Vue is made up of three segments, the template (HTML), the script (JS), and the styles (CSS). The definition of the template does not differ from a component created with Vue.component other than that it must be encapsulated in the template tag. You can create a component with only one of the segments, regardless of which one it is, with two, or with all three. Below is an example of a component with only the template.
<template>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
</template>A static component may seem somewhat useless. However, a good example of when you could use it is when you want to load an SVG image with a lot of code and you don't want to reload a component with so much information. For the case previously seen where we want to render a navigation menu, it may be useful to receive information from the parent component. To do this, we must add the props property and this along with all the other options of our component must be exported with export default.
<template>
<ul class="nav">
<li class="nav-item" v-for="item in items" :key="item">
<a class="nav-link" href="#">{{ '\{\{ item \}\}' }}</a>
</li>
</ul>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true,
},
},
};
</script>To see the use of the v-for directive, you can check our article Rendering lists in Vue.js with v-for. In addition to this, if you wanted to apply a style to this component, we could add the respective section for the CSS.
<style scoped>
ul > li {
border: solid 1px silver;
margin-left: 2px;
background: rgb(240, 240, 240);
}
</style>The scoped attribute is so that the style only applies to the component in question. Remember that this file should have the .vue extension. We could, for example, call this component SiteNav.vue.
Using a single file component
To use the component created above within another component, simply import it with an import and load it into the parent component. Let's see for example how the following component loads SiteNav.
<template>
<div id="app">
<site-nav :items="nav"></site-nav>
</div>
</template>
<script>
import SiteNav from "./components/SiteNav";
export default {
name: "App",
components: {
SiteNav,
},
data() {
return {
nav: ["Home", "Products", "About Us"],
};
},
};
</script>In this example, we are assuming that the component that calls SiteNav is one folder above this one and that SiteNav is in the components folder. Note also that we imported the component as SiteNav but the tag is site-nav. You can see this example of a single file component in CodeSandbox.