How do I get Bootstrap's Javascript to work in Vue (Gridsome)?

Question

Link to my site:

https://inspiring-curran-a31177.netlify.com/

It's using Gridsome, the static site generator for Vue.

When you go down to mobile and click on the Bootstrap Hamburger menu, it won't open.

I've followed the instructions in Gridsome's docs by installing BootstrapVue: https://gridsome.org/docs/assets-css/

There are no Javascript errors in the console.

Code from /src/main.js:

// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client- 
api

// Import nav
import DefaultLayout from '~/layouts/Nav.vue'
// Import footer
import Footer from '~/layouts/Footer.vue'
// Import Bootstrap
import BootstrapVue from 'bootstrap-vue'
// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.min.css'
// Import Bootstrap JS
import 'bootstrap-vue/dist/bootstrap-vue.min.js'

export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout),
  // Footer
  Vue.component('Footer', Footer)
  // Import bootstrap
  Vue.use(BootstrapVue),
  // Add google fonts
  head.link.push({
    rel: 'stylesheet',
    href: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro'
  })
}

Answer 1

Did you install all the scripts in the HTML ?

<script src="//unpkg.com/@babel/polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

Answer 2

Welcome to SO!

Let's say you're using Bootstrap npm module.

npm i -s bootstrap

in your Main.js file

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

For Hamburger please find the codesandbox , where bootstrap menu is used

Hope this helps!

Answer 3

Found the solution!

I had to use the navbar directly from BootstrapVue as a component, which is here - https://bootstrap-vue.js.org/docs/components/navbar . Instead of using a standard bootstrap navbar, right from the main bootstrap site.