如何在 Laravel 8/Inertia.js/vuejs3 应用程序中创建和使用通用 mixin？

Question

在 vuejs2 应用程序中，我创建了通用 mixin 并在 resources/js/app.js 中引用了它，例如：

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

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

但是我没能在Laravel 8/Inertia.js 0.4/vuejs3 应用程序中做类似的事情:

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);

我该怎么做？此外，我在应用程序的许多部分都使用了全局 Vue，例如读取进程环境变量。

我怎样才能在 Inertia.js /vuejs 应用程序中做到这一点？

谢谢！

Answer 1

在 Vue 3 中，您应该首先创建应用程序，然后应用 mixin：

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

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

app.mount('#app')

如何在 Laravel 8/Inertia.js/vuejs3 应用程序中创建和使用通用 mixin？

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

inertiajs

laravel

vuejs3