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 ***

npm i bootstrap-vue --save.
Remove the bootstrap-vue.js file from plugins folder.
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/[email protected]/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>

Don't you want to fix Bootstrap Vue? Using Bootstrap-only will make you lose all the components logic that is already done for you. So, it'll become just some styling and nothing dynamic (so no Datepicker for example). If you want style only, you should probably consider something else too. What is the issue with Bootstrap modal? — kissu
– kissu, Commented Aug 20, 2021 at 7:09
On a side note, if you want a guide to properly install and use jquery, here: stackoverflow.com/a/68414170/8816585 — kissu
– kissu, Commented Aug 20, 2021 at 7:46
@kissu Actually I am fine with fixing the Bootstrap Vue as well. Since I was not finding any proper example with dropdowns and workflow I thought of switching to Plain Bootstrap as I have worked with it briefly before. Please let me know what steps I need to follow to fix my Bootstrap vue and get it working properly with my Modal. — BATMAN_2008
– BATMAN_2008, Commented Aug 20, 2021 at 7:54
Show us your nuxt.config.js file, any additional configuration related to Boostrap-vue done so far and what is not working (vs what is expected) please. — kissu
– kissu, Commented Aug 20, 2021 at 7:56
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css Any reason why you're using such an old version of Bootstrap? Specifically if you're using BootstrapVue you should be using version 4.5.3 of Bootstrap. — Hiws
– Hiws, Commented Aug 20, 2021 at 9:42

kissu · Accepted Answer · 2021-08-20 09:11:31Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related