Categories

Oct 1, 2019 in Vue.JS

Q: What is Vue Single file component?

1 Answer

Oct 1, 2019
In many Vue projects, global components will be defined using Vue.component, followed by new Vue({ el: '#container' }) to target a container element in the body of every page.

This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views. In more complex projects however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent:

Global definitions force unique names for every component

String templates lack syntax highlighting and require ugly slashes for multiline HTML

No CSS support means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out

No build step restricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) 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.
Click here to read more about Vue JS
Click here to read more about Insurance

Related questions

Madanswer
Oct 9, 2019 in Vue.JS
Oct 9, 2019 in Vue.JS
Oct 7, 2019 in Vue.JS
...