We have been writing Vue apps using single HTML pages for quickness and getting the outcomes we wanted to see. But in a real development project in Vue or Nuxt, we wouldn't want to write something like this:
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
In the preceding code, we have created two Vue components using JavaScript objects in one place (for example, in a single HTML page), but it is better to separate them and create each component in a separate .js file, like so:
// components/foo.js
Vue.component('page-foo', {
data: function () {
return { message: 'foo' }
},
template: '<div>{{ count }}</div>'
})
This can work very well for a simple component, where the HTML layout is simple. However, in more complex layouts that involve more complicated HTML markups, we would want to avoid coding our HTML inside a JavaScript...