Vue 3 - How to use components and mixins in root component?

Question

I tried converting the syntax from Vue 2 to Vue 3 but I'm not sure how to include mixins and components if you see this for Vue 2 Code:

import App from "./App.vue";

const app = new Vue({
  mixins: [globalMixin],
  router,
  el: '#app',
  store,
  components: {
     Thing,
       Hello
  },
  render: h => h(App)
});

This is the syntax for Vue 3, if I understand it correctly:

const app = createApp(App)
app
.use(store)
.use(router)
 
app.mount('#app')

The example for Vue 2 has a mixin and two components, but how do I add them to Vue 3's syntax? You can add a component by doing: app.component('Thing', Thing), but that's just one component... should I add them one by one? What about blending in?

Answer 1

In Vue 3, you can use the application API mixin method.

import { createApp } from 'vue'
import App from './App.vue'
import globalMixin from './globalMixin'

const app = createApp(App)

app.mixin(globalMixin)

app.mount('#app')

For components, you can add them one by one. I prefer this way because it's clearer.

Answer 2

In Vue 3, local component registration and mixins are possible in the root component (very useful when trying to avoid polluting the global namespace). Use extendsoptions to extend the component definition of App.vue, then add your own mixins and components options ：

import { createApp } from 'vue'
import App from './App.vue'
import Hello from './components/Hello.vue'
import Thing from './components/Thing.vue'
import globalMixin from './globalMixin'

createApp({
  extends: App,
  mixins: [globalMixin],
  components: {
    Hello,
    Thing,
  }
}).mount('#app')

Registering components one by one seems like a good approach, especially if there are only a few components.

Demo