javascript - How do I add popper.js to a Laravel 8 with Bootstrap 5 project? - Stack Overflow

admin管理员组

文章数量:1312635

I am making a blogging application with Laravel 8 and Bootstrap 5. I use a form placed within a Bootstrap modal to add a post. In addition, I include a single JavaScript file in the project.

<script src="{{ asset('js/app.js') }}"></script>

In resources/js, I have an app.js and a bootstrap.js file. In app.js, I require bootstrap.js with

require('./bootstrap')

From webpack.mix.js I pile all that into the single JavaScript file public\js\app.js:

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

I want to add popper.js to the project, like this:

require('./popper');
require('./bootstrap');

But, for this purpose, I need the popper.js in resources/js along with the other two files. So, I did npm i @popperjs/core and npm run dev. But it does not pile, and I don't get popper.js in the above-metioned js directory. So, how can I fix this issue?

I am making a blogging application with Laravel 8 and Bootstrap 5. I use a form placed within a Bootstrap modal to add a post. In addition, I include a single JavaScript file in the project.

<script src="{{ asset('js/app.js') }}"></script>

In resources/js, I have an app.js and a bootstrap.js file. In app.js, I require bootstrap.js with

require('./bootstrap')

From webpack.mix.js I pile all that into the single JavaScript file public\js\app.js:

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

I want to add popper.js to the project, like this:

require('./popper');
require('./bootstrap');

But, for this purpose, I need the popper.js in resources/js along with the other two files. So, I did npm i @popperjs/core and npm run dev. But it does not pile, and I don't get popper.js in the above-metioned js directory. So, how can I fix this issue?

• javascript
• laravel
• twitter-bootstrap
• laravel-mix
• popper.js

Share Improve this question Follow edited Mar 19, 2022 at 22:26 user633440 asked Mar 19, 2022 at 10:00 Razvan ZamfirRazvan Zamfir 4,66277 gold badges4747 silver badges283283 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

1 - Install @popperjs/core using this mand: npm i @popperjs/core

2 - Add this line to your bootstrap.js file:

window.Popper = require('@popperjs/core');

3 - Run this mand: npm run dev

4 - Now you have access to window.Popper in your blade files.

In your resources/js/bootstrap.js file, you can use Popper.js and Bootstrap with jQuery like the following.

window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('@popperjs/core');
    window.bootstrap = require('bootstrap');
} catch (exception) {
    console.error(exception);
}

本文标签： javascriptHow do I add popperjs to a Laravel 8 with Bootstrap 5 projectStack Overflow