Vue.js Single File Components

In this article, we will learn about how to create a single file that is responsible for everything that regards a single component, centralizing the responsibility for the appearance and behavior.

A Vue component can be declared in JavaScript file .js files

Vue.component('component-name', {
  /* options */})

// OR

new Vue({
  /* options */})

or it can be specified in the .vue file.

The .vue file is pretty cool as it allows us to define

• JavaScript Logic
• CSS
• HTML Code

all in just a single file and that’s why it’s called Single File Component.

For example:

<template>
  <p>{{ say }}</p>
</template>

<script>
export default {
  data() {
    return {
      say: 'Hello World!'
    }
  }
}
</script>

<style scoped>
  p {
    color: green;
  }
</style>

All of this is possible with the help of webpack. The Vue CLI makes this very easy. .vue files cannot be used without a web pack setup.

As the Single file component depends on the web pack, we are free to use the latest syntax for development as webpack will manage it.

You can define a style using CSS, SCSS, or Stylus. All you need to do to make this happen is to declare to Vue which language preprocessor you are going to use.

The list of preprocessors included are:

• TypeScript
• SCSS
• Sass
• Less
• PostCSS
• Pug

We can use modern JavaScript regardless of the target browser, using the Babel integration, and ES Modules too, so we can use import/export statements also.

We can use CSS Modules to scope our CSS.

By using scoping CSS, Single File Components make it absolutely easy to write CSS that won’t leak to other components, by using style scoped tags.