How to create and use common mixin in Laravel 8/Inertia.js/vuejs3 application?

Question

in vuejs2 applications I created common mixin and referenced it in resources/js/app.js like :

require('./bootstrap');
import Vue from 'vue';

import common from "./common";
Vue.mixin(common);

But I failed to make similar in Laravel 8/Inertia.js 0.4/vuejs3 application :

import Vue from 'vue' // i got compile error : export 'default' (imported as 'Vue') was not found in 'vue'
// Vue = required('vue')  // GOT RUN TIME ERROR : app.js:26221 Uncaught ReferenceError: required is not defined

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';


import common from "./appMixin";
Vue.mixin(common);

How can I do it ? Also I used global Vue in many parts of application, like reading process env variables.

How can I do it in Inertia.js /vuejs app ?

Thanks!

Matheus Dal'Pizzol · Accepted Answer · 2021-09-09 22:43:29Z

2

In Vue 3 you should first create the app and then apply the mixin:

const app = Vue.createApp({
  // root instance stuff here
})

app.mixin({
  // ...mixin stuff here
})

app.mount('#app')

answered Sep 9, 2021 at 22:43

Matheus Dal'Pizzol

6,1253 gold badges24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create and use common mixin in Laravel 8/Inertia.js/vuejs3 application?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related