How to properly setup bootstrap-vue in my Nuxt app?

Question

I am very new to Nuxt.js application and I am trying to create a web application using the Nuxt.js and Vue.js. During the creation of the project using the Nuxt cli I have added the Bootstrap-vue.

I am facing some problems with Bootstrap modal creation hence I want to remove the Bootstrap vue completely and add the good old plain Bootstrap into my application. I tried adding as per a few of the answers found here but for some reason, it's not working as expected and my Modal is not being displayed properly with drop-downs etc. So my guess is that I have not properly removed the Bootstrap vue from my application and added the Bootstrap completely.

Can someone please let me know if I have missed something here:

** Removal of Bootstrap-vue ***

1. npm i bootstrap-vue --save.
2. Remove the bootstrap-vue.js file from plugins folder.
3. Remove plugin from nuxt-config.js: plugins: ["@/plugins/bootstrap-vue"],

** Installing plaing old Bootstrap ** Added following CDN links to my nuxt-config.js file:

script: [
      {
        src: "https://code.jquery.com/jquery-3.6.0.min.js"
      },
      {
        src:
          "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
      }
]

link:[
      {
        rel: "stylesheet",
        href:
          "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      },
      {
        rel: "stylesheet",
        href:
          "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
      }]

After doing these things when I create a simple modal using Boostrap and add drop-down to it, it does not display anything on the modal

Can someone please confirm if I am following proper workflow or am I missing something? Any help or recommendation would be really helpful.

*** UPDATED ***

Following is my nuxt-config.js file:

import colors from "vuetify/es5/util/colors";

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    titleTemplate: "%s - openepcis-test-data-generator-ui",
    title: "EPCIS | Test Data Generator",
    htmlAttrs: {
      lang: "en"
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" }
    ],
    script: [
      /* {
        src: "https://code.jquery.com/jquery-3.6.0.min.js"
      },
      {
        src:
          "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
      }*/
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/Logo.ico" },
      {
        rel: "stylesheet",
        href:
          "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"
      }
      /* {
        rel: "stylesheet",
        href:
          "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      },
      {
        rel: "stylesheet",
        href:
          "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
      }*/
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ["@/assets/css/styles.css"],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: ["@/plugins/bootstrap-vue"],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    [
      "@nuxtjs/eslint-module",
      {
        fix: true
      }
    ],
    ["@nuxtjs/vuetify"],
    ["@nuxtjs/dotenv"]
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: ["@nuxtjs/axios"],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: process.env.API_URL,
    headers: {
      "Content-Type": "text/plain"
    }
  },

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {},

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    babel: {
      plugins: [
        ["@babel/plugin-proposal-class-properties", { loose: true }],
        ["@babel/plugin-proposal-private-methods", { loose: true }],
        ["@babel/plugin-proposal-private-property-in-object", { loose: true }]
      ]
    }
  },

  server: {
    port: 5000
  }
};

I have following things in my plugins/bootstrap-vue.js:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)

Apart from that following is code for modal:

<template>
  <div v-if="$store.state.showModal">
    <transition name="modal">
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">
                  Add Options
                </h5>
                <button
                  type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"
                >
                  <span
                    aria-hidden="true"
                    @click="hideModal"
                  >&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  @click="hideModal"
                >
                  Close
                </button>
                <button type="button" class="btn btn-primary">
                  Save changes
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {}
  },
  methods: {
    hideModal () {
      this.$store.commit(
        'hideModal'
      )
    }
  }
}
</script>

<style>
</style>

Answer 1

I'm not sure if you need Vuetify + BoostrapVue, but if it's not an issue you can generate a brand new project with npx create-nuxt-app my-awesome-project and select BootstrapVue there.

---

Otherwise, you can follow the instructions here: https://bootstrap-vue.org/docs#nuxtjs-module

So, you'll have to yarn add bootstrap-vue
Then adding this to your nuxt.config.js file does the thing

export default {
  modules: [
    'bootstrap-vue/nuxt',
  ],
}

And the first example in the documentation works well

<template>
  <div>
    <b-button v-b-modal.modal-1>Launch demo modal</b-button>

    <b-modal id="modal-1" title="BootstrapVue">
      <p class="my-4">Hello from modal!</p>

      <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
        <b-dropdown-item>First Action</b-dropdown-item>
        <b-dropdown-item>Second Action</b-dropdown-item>
        <b-dropdown-item>Third Action</b-dropdown-item>
        <b-dropdown-divider></b-dropdown-divider>
        <b-dryopdown-item active>Active action</b-dryopdown-item>
        <b-dropdown-item disabled>Disabled action</b-dropdown-item>
      </b-dropdown>
    </b-modal>
  </div>
</template>