Registering local components in Vue/Nuxt

We have seen and used local components in the Vue and Nuxt apps in this chapter. These components are created by using plain JavaScript objects, as follows:

var ComponentX = { ... }
var ComponentY = { ... }
var ComponentZ = { ... }

Then, they can be registered through the components option, as follows:

new Vue({
  el: '#app',
  components: {
    'component-x': ComponentX,
    'component-y': ComponentY,
    'component-z': ComponentZ
  }
})

Remember the Vue app we created at the beginning of the Passing data to child components with props section, in the /chapter-5/vue/component/basic.html file in this book's GitHub repository? The user-item component in that app is a global component. Now, let's refactor it and turn it into a local component:

1. Remove the following global component:

Vue.component('user-item', {
  props: ['user'],
  template: '<li>{{ user...