Vuejs, single file component

Single file component could be the best option for small or big project, where javascript has major role. Vue.js single file component can be a good option, let’s see how and why we should implement it.

There are some disadvantages when your application is driven by javascript.

  • Application is forced to use unique name for every component
  • lack of syntax highlighting and require ugly slashes for multiline HTML
  • No build setup restricts us to HTML and ES5 JavaScript, and keep away from taking advantages of ES6 JavaScript and CSS preprocessors like Jade(Pug) and Babel.

All of these are solved by single-file components with a .vue extension, made possible with build tools such as Webpack or Browserify.

Let’s take a look at an example of Greeting.vue

  <p>{{ greeting }} World!</p>

module.exports = {
  data: function () {
    return {
      greeting: 'Hello'

<style scoped>
p {
  font-size: 2em;
  text-align: center;

That’s it, this is how single file component can be created. Same way small feature can be make in single file component for reusability.

In next article I will explain how to use single file component in page component.

Cheers & see you in next post!!

Author: Danyal
I'm skilled programmer with expertise in Vue.js/Nux.js for front-end development and PHP Laravel for back-end development. I excel in building APIs and services, and also have experience in web server setup & maintenance. My versatile skill set allows you to develop and maintain web applications effectively, from the user interface to the server-side functionality. I love coding with never ending learning attitude, thanks for visiting