Bootstrap Vue Sidebar component not working properly

Question

I created a new Vue project with default settings, then installed Bootstrap, Bootstrap-vue and JQuery. I copied an example from Bootstrap-vue website and unfortunately it doesn't work. This is how it looks when opened:

Neither the animation nor the properties are working (i.e. I cannot move it to the right side). My App.vue file:

<template>
  <div>
    <b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
    <b-sidebar id="sidebar-1" title="Sidebar" shadow>
      <div class="px-3 py-2">
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
          dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
          consectetur ac, vestibulum at eros.
        </p>
        <b-img
          src="https://picsum.photos/500/500/?image=54"
          fluid
          thumbnail
        ></b-img>
      </div>
    </b-sidebar>
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
};
</script>
<style>
</style>

package.json file:

{
  "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bootstrap": "^4.5.2",
    "bootstrap-vue": "^2.17.3",
    "core-js": "^3.6.5",
    "jquery": "^3.5.1",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

main.js file:

import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);
new Vue({
  render: (h) => h(App),
}).$mount("#app");

I will just point out that all the other components are working fine. Is there something additional that I have to do to use the sidebar component? Has anyone else had a similar problem?

Answer 1

The sidebar is a custom component in BootstrapVue, and therefor requires you to add BootstrapVue's CSS.

Add the following line under your bootstrap.min.css import.

import 'bootstrap-vue/dist/bootstrap-vue.css'

then installed Bootstrap, Bootstrap-vue and JQuery

Regarding this line, BootstrapVue does NOT require jQuery to function, so if you're only installing it because of BootstrapVue, you can freely remove it.

Answer 2

I encountered this same issue and did everything right but it still had the same problem. My solution was to upgrade all my packages using: yarn upgrade --latest