Vue is not defined / require is not defined issue while using Laravel 9.x with Vite Asset Bundling

Question

I want to use VueJs partially in my Laravel project and with Laravel Mix it works perfectly fine but not with Vite Asset Bundling.

With Laravel Mix:

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .vue();

resources\js\app.js

window.Vue = require('vue');

Layout Blade file

<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
@stack('scripts')

In any blade file of laravel

@push('scripts')
<script>
    const app = Vue.createApp({
        data() {
            return {
                username: 'John Doe'
            }
        }
    });

    app.mount('#app');
</script>
@endpush

This works perfectly fine.

But with Vite Asset Bundling it is not working. It gives us console errors Vue is not defined & require is not defined.

With Vite:

vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue(),
    ],
});

resources\js\app.js

import './bootstrap';
window.Vue = require('vue');

Layout Blade File

@vite(['resources/js/app.js'])
@stack('scripts')

In any blade file of laravel

@push('scripts')
<script>
        const app = Vue.createApp({
        data() {
            return {
                username: 'John Doe'
            }
        }
    });

    app.mount('#app');
</script>
@endpush

app.blade.php - layout file

Please update if you found any solution regarding the same or let me know if I am making a silly mistake :D. Thank you!

parapente · Accepted Answer · 2023-01-04 15:18:38Z

0

You cannot use require with vite. According to the official upgrade guide of laravel-mix to vite:

Vite only supports ES modules, so if you are upgrading an existing application you will need to replace any require() statements with import. You may refer to this pull request for an example.

So resources/js/app.js should be:

import './bootstrap';
import * as Vue from 'vue/dist/vue.esm-bundler';

window.Vue = Vue;

To be able to use window as a global variable in vite you need to define it in the configuration. So vite.config.js should read:

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
    ],
    define: {
        global: 'window',
    }
});

Another thing you need to make sure is to declare the script block as type module:

@push('scripts')
<script type="module">
    const app = Vue.createApp({
        data() {
            return {
                username: 'John Doe'
            }
        }
    });

    app.mount('#app');
</script>
@endpush

edited Jan 4, 2023 at 15:18

answered Dec 30, 2022 at 11:25

parapente

6306 silver badges14 bronze badges

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

6 Comments

Amit Meghare Over a year ago

Thanks for the response. :) I already tried importing the VueJs but still getting the errors in the console. I have added the screenshots (of my code) to the question for more clarification. Please have a look.

parapente Over a year ago

You need to use import * as Vue from 'vue' in app.js

Amit Meghare Over a year ago

Still shows an error in the console "Uncaught ReferenceError: Vue is not defined" on that login.blade.php file. :(

parapente Over a year ago

A note for any further questions you may post in StackOverflow: you should create a simple example that reproduces the problem in a repository that is publicly available to make it easier to detect problems. I created locally a new laravel app and noticed the problem that you said. The problem is that vite doesn't use the window variable as global by default. See the edited answer for how to fix it.

Amit Meghare Over a year ago

Sorry, I forgot to create a repo. This is my first time raising/discussing some issues on StackOverflow. Here is the repo. As you guided, I have defined the global: 'window' but still shows the same error in the console "Uncaught ReferenceError: Vue is not defined" on that login.blade.php file. :(

|

Collectives™ on Stack Overflow

Vue is not defined / require is not defined issue while using Laravel 9.x with Vite Asset Bundling

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related