Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at how to use single-file components.
Why do we need Single File Components?
We need single-file components because components defined by Vue.component can’t scale to larger projects.
If we want to use Vue.component on larger projects, we have to create an element to house them and also our templates to be strings on be in a script tag. Strings don’t have syntax highlighting support for templates.
They are both a plain if a component is bigger or has lots of nesting.
Also, all components are global when they’re defined with Vue.component . This forces all component names to be unique.
In addition, there’s no CSS support means that we have to add them to other places. It’s hard to modular CSS without single-file components.
We’re also stuck with HTML and ES5 JavaScript for templates rather than a preprocessor since there’s no build step to convert things from newer versions of JavaScript and non-HTML entities into HTML and ES5.
With single-file components, we get syntax highlighting, modules, and component-scoped CSS.
We can also use languages that we prefer like TypeScript, SCSS, CSS modules, etc, with them.
Note that separation of concerns isn’t the same as the separation of file types.
Defining and Using Single-File Components
We can use single-file components easily with the Vue CLI. To do this, we just create a folder, go into it, and then run:
npx vue create .
and select the default options.
Then we should get a starter app with single-file components that we can change.
The single-file components have the .vue extension.
When we create an app with Vue CLI, we get App.vue and components/HelloWorld.vue .
They have the structure:
<template>
</template><script>
</script><style>
</style>
Where template has the HTML, script has the JavaScript code, and style has the styling code.
script can also be written in related languages like TypeScript.
For example, we can change App.vue to the following:
<template>
<div id="app">
<input v-model="message">
<p>{{message}}</p>
<button @click='showMessage'>Show Message</button>
</div>
</template><script>
export default {
name: "App",
data() {
return {
message: ""
};
},
methods: {
showMessage() {
alert(this.message);
}
}
};
</script><style>
#app {
font-family: "Times", serif;
}
</style>
To run the project, we run:
npm run serve
Then we see an input where we can type in something, see the text we typed in in the p element, and have a button that shows an alert box with we typed in.
The script section has the same stuff as what we defined in the options object when we use Vue.component .
The data has the initial data as usual, and methods have methods that we can call from the template just like any other component.
style has the styling code in CSS or another language like SASS.
We can also separate the script and style code into their own files as follows:
src/app.js :
export default {
name: "App",
data() {
return {
message: ""
};
},
methods: {
showMessage() {
alert(this.message);
}
}
};
src/app.css :
#app {
font-family: "Times", serif;
}
App.vue :
<template>
<div id="app">
<input v-model="message">
<p>{{message}}</p>
<button @click="showMessage">Show Message</button>
</div>
</template><script src='./app.js'></script><style src='./app.css'></style>
Conclusion
Single-file components make modularizing our app and using new technologies in them easier.
The code in a single-file component is separated into template , script and style sections.
The template section has the HTML code. script section has the logic in JavaScript or related languages like TypeScript. The style section has the styling code in CSS or related languages like SASS.
The script and style code can also be separated into their files and included with the src attribute.
We can make an app that uses single-file components easily with the Vue CLI.
