Vue.js+Laravel引入JS文件时遇Bootstrap JS依赖jQuery错误求助

阿华AIGC实验室

2026-5-14

Hey there, let's fix that "Bootstrap's JavaScript requires jQuery" error you're hitting in your Vue.js + Laravel project. This issue almost always comes down to one of two things: jQuery isn't loading before Bootstrap, or Bootstrap can't access jQuery globally (since modern module bundlers like Vite don't expose variables to the window by default). Let's break this down based on which asset tool your Laravel project uses:

For Laravel Mix (Laravel 8 and earlier)

If your project uses Laravel Mix (the older Webpack-based tool), follow these steps:

First, make sure you have jQuery and Bootstrap installed via npm:
```
npm install jquery bootstrap
```

Next, update your webpack.mix.js to tell Webpack to provide jQuery globally—this lets Bootstrap detect it without extra work. Add the Webpack ProvidePlugin configuration:

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

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .webpackConfig({
       plugins: [
           new webpack.ProvidePlugin({
               $: 'jquery',
               jQuery: 'jquery',
               'window.jQuery': 'jquery'
           })
       ]
   });

Now, in resources/js/app.js, import Bootstrap's JavaScript (the ProvidePlugin already ensures jQuery is available globally):
```
// If you haven't already, import Bootstrap here
import 'bootstrap';
```

Recompile your assets:

npm run dev
# Or for production: npm run prod

Double-check your Blade template loads the compiled app.js file—make sure there's no separate Bootstrap JS file loaded before it.

For Vite (Laravel 9+)

If you're using Vite (the default asset tool for newer Laravel versions), the process is a bit different since Vite uses ES modules that don't expose variables to the window by default:

First, install all required dependencies (Bootstrap also needs Popper.js for dropdowns/modals):
```
npm install jquery bootstrap @popperjs/core
```

Update your vite.config.js to alias jQuery for easier importing:

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({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            jquery: 'jquery/dist/jquery.min.js'
        }
    }
});

In resources/js/app.js, explicitly mount jQuery to the window object before importing Bootstrap—this is critical because Bootstrap checks for window.jQuery:

import $ from 'jquery';
// Expose jQuery to the global window object
window.$ = window.jQuery = $;

// Now import Bootstrap's JavaScript
import 'bootstrap';

Recompile your assets:
```
npm run dev
```
Make sure your Blade template uses the @vite directive to load your assets (this ensures proper module loading order):
```
@vite(['resources/css/app.css', 'resources/js/app.js'])
```

Quick Troubleshooting Checks

If you still see the error after following these steps:

Verify load order: Ensure no separate Bootstrap JS file is loaded before your compiled app.js (which includes jQuery).
Clear browser cache: Old cached assets can cause mismatched loading order—hard refresh your browser (Ctrl+Shift+R or Cmd+Shift+R).
Avoid duplicate jQuery sources: Don't mix npm-installed jQuery with a CDN version; pick one to prevent conflicts.
Check for Vue component timing: If you're using Bootstrap JS features in a Vue component, make sure the component mounts after jQuery and Bootstrap are fully loaded (the global import in app.js should handle this, but double-check).

内容的提问来源于stack exchange，提问作者Md Al imrun Khandakar