There are a few methods we can use to create a Vue component. A global Vue component is created by using Vue.component, as follows:
Vue.component('todo-item', {...})
On the other hand, a local Vue component can be created using a plain JavaScript object, as follows:
const TodoItem = {...}
These two methods are manageable and maintainable if you're using Vue for a small project, but it becomes difficult to manage for a big project when you have tons of components with different templates, styles, and JavaScript methods all at once.
Hence, single-file components come to the rescue, in which we only use one .vue file for each Vue component. If you need more than one component in your app, then just separate them into multiple .vue files. In each of them, you can write the template, script, and style that relate to that particular component only, as follows:
// pages/index.vue
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
data () {
return { message: 'Hello World' }
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
Here, you can see how we have an HTML template that prints the message from the JavaScript script and the CSS style that describes the presentation of the template, all in one single .vue file. This makes your code more structured, readable, and organizable. Sweet, isn't it? This is only made possible by vue-loader and webpack. In Nuxt, we only write components in .vue files, regardless of whether they are components in the /components/, /pages/, or /layouts/ directory. We will explore this in more detail in Chapter 2, Getting Started with Nuxt. Now, we'll look at the Nuxt feature that allows you to write ES6 JavaScript out of the box.
