0

I'm using Vite and VueJS in order to build out an application which has the main application scripts, and various plugin scripts which can be loaded in completely independently of the main application (and built at different times).

However, I'm struggling to get the VueJS/Vite configuration working so that the VueJS runtime is used correctly so that the plugin works as it should. For now my Vite config for both is:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['src/frontend.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~root': __dirname + "/node_modules/",
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

But doing this while my plugin components appear, items such as v-model just don't work on my plugin's components, presumably by some conflict of having two different vue runtimes? But I can't seem to figure out how to only have a singular runtime to rule this out.

There's no errors output or warnings related to this behaviour so I'm not too sure what is happening

1
  • The question doesn't show your case. " various plugin scripts which can be loaded in completely independently of the main application" - what are they, how are they built? It's expected they will have different vue copies and problems with reactivity, unless you take care of it. This can be achieved through module federation or using vue cdn global instead of a package Commented Nov 8 at 10:41

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.