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

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

<script>
module.exports = {
  data: function () {
    return {
      greeting: 'Hello'
    }
  }
}
</script>

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

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!!