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

bootstrap 4
bootstrap cdn
bootstrap tutorial
bootstrap 3
bootstrap 5
bootstrap templates
how to use bootstrap
bootstrap 4 tutorial

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'
  })
}

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>

Bootstrap � The most popular HTML, CSS, and JS library in the world., Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page. You can: Download Bootstrap from getbootstrap.com Include Bootstrap from a CDN

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!

Getting started � Bootstrap, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files. No docs or original source files. Download Bootstrap

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.

Introduction � Bootstrap, What is Bootstrap? Bootstrap is a free front-end framework for faster and easier web development; Bootstrap includes HTML and CSS based design templates� An easy way to get the Bootstrap example markup. Navbar. While most of the Bootstrap Components are self-explanatory and well-documented, I think the Navbar requires a full explanation. Along with

Bootstrap Get Started, This Bootstrap tutorial shows you how to create a website using Bootstrap step by step. From setup over basics to advanced features. Learn� Steps to Install Bootstrap Let us discuss the steps required to install Bootstrap. Step 1: Use the below link to get bootstrap downloaded. Click on Download, the bootstrap package will be downloaded in a Zip folder.

Bootstrap 4 Get Started, Learn how to use Bootstrap in your project and how to convert a simple HTML file into a Bootstrap template by including the Bootstrap CSS and JS files. Download Bootstrap − Clicking this, you can download the precompiled and minified versions of Bootstrap CSS, JavaScript, and fonts. No documentation or original source code files are included. Download Source − Clicking this, you can get the latest Bootstrap LESS and JavaScript source code directly from GitHub.

Bootstrap Tutorial, According to the official website, Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on� There's some extra space we don't want, but I want to see how far Bootstrap can get us without overriding styles. As you can see, we already have a pretty nice, adaptable layout without having written a single line of CSS. Grid. The last thing I'll do is add in some main content, which will be in the form of a grid. Grids are rows

Comments
  • Where would I place that? Tried putting it in /src/main.js, it's throwing errors.
  • Try in the html
  • I've updated my answer above (new link and code). I've added the bootstrap-vue.min.js file, it compiles properly so it finds it, but hamburger menu still won't work.
  • I've updated my answer above (new link and code). I've added the bootstrap-vue.min.js file, it compiles properly so it finds it, but hamburger menu still won't work
  • can you add the code for hamburger here? or please find the codesandbox, where it is working
  • How is it working there? In the main.js file, I don't see a mention of any bootstrap JS import.
  • Bootstrap JS will be imported automatically and bundle it with othet JS by webpack,
  • Did you encounter a situation where the navbar was collapsed even with the window in full screen?
  • Yes I did, but then I found out i was purging the css which was causing the issue