在 Gridsome 中使用 jQuery 和 Popper.js

Question

I want to use a Bootstrap Material Design Library ( https://fezvrasta.github.io/bootstrap-material-design/ ) in my Gridsome project.

Unfortunately jQuery and Popper.js don't work (jQuery/Popper.js not defined). Using default Bootstrap 4 works like a charme.

This is my main.js:

import DefaultLayout from '~/layouts/Default.vue'
import "bootstrap-material-design"
import '~/assets/styles/app.scss'

export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout);
}

Additionally importing Bootstrap and jQuery and Popper.js doesn't work.

Of course I could reference it directly in my html-template, but I want to include it in my build-process...

Using the scss-files also works with @import "~bootstrap-material-design/scss/bootstrap-material-design"; in my app.scss.

Any ideas on how to import jquery and popper.js in my main.js?

Answer 1

You should try to import Jquery and Popper.js by yourself.

First of all add this lines to your package.json file:

"dependencies": {
    "jquery": "^3.1.1" //or whaterver versions you need
    "popper.js": "^1.15.0",
 },

and then import those modules with:

npm install

Now you need to add few lines in you src/main.js file:

window.Popper = require('popper.js').default;

This line will load popper.js and make it available to be executed with bootstrap. Then you can require jquery:

require('jquery')

I still have some problems with importing js assets in Gridsome when, for example, I try to go with a theme I downloaded from the internet but I find that If you look at the docs in theme the best way probably is to make your own version of those files by importing the modules that you need using this way

cheers