How do I use Vue.component with modules or Vue CLI?

I’m stuck on how to declare Vue.component inside export default

this is from the tutorial by vuejs.org

instead of using var app = new vue, I use

export default {
  name: "App",
  
  el: "#app-7",
  data() {
    return {
      barangBelanjaan: [
        { id: 0, barang: 'Sayuran' },
        { id: 1, barang: 'Keju' },
        { id: 2, barang: 'Makanan yang lain' }
      ],
    };
  },
};

and i dont know where to write Vue.component in export default app

thank you in advanced!

Answer

Components can be registered globally or locally. Vue.component is the way to register globally, which means all other components can then use this component in their templates.

Global components

When using a build tool like Vue CLI, do this in main.js:

import Vue from 'vue'
import todoItem from '@/components/todoItem.vue'  // importing the module

Vue.component('todoItem', todoItem);              // ✅ Global component

-or-

Local components

Or you can register a component in a specific component using the components option.

components: {
  todoItem
}

So your App.vue would become:

import todoItem from '@/components/todoItem.vue'  // importing the module

export default {
  name: "App",
  el: "#app-7",
  components: {      // ✅ Local components
    todoItem
  },
  data() {
    return {
      barangBelanjaan: [
        { id: 0, barang: 'Sayuran' },
        { id: 1, barang: 'Keju' },
        { id: 2, barang: 'Makanan yang lain' }
      ],
    };
  },
}