title: How to properly setup bootstrap-vue in my Nuxt app?
body: <p>I am very new to <code>Nuxt.js</code> application and I am trying to create a web application using the <code>Nuxt.js and Vue.js</code>. During the creation of the project using the <code>Nuxt cli</code> I have added the <code>Bootstrap-vue</code>.</p>
  <p>I am facing some problems with <code>Bootstrap modal</code> creation hence I want to remove the <code>Bootstrap vue</code> completely and add the good old plain <code>Bootstrap</code> 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 <code>Modal</code> is not being displayed properly with <code>drop-downs</code> etc. So my guess is that I have not properly removed the <code>Bootstrap vue</code> from my application and added the <code>Bootstrap</code> completely.</p>
  <p>Can someone please let me know if I have missed something here:</p>
  <p>** Removal of Bootstrap-vue ***</p>
  <ol>
  <li><code>npm i bootstrap-vue --save</code>.</li>
  <li>Remove the <code>bootstrap-vue.js</code> file from <code>plugins</code> folder.</li>
  <li>Remove <code>plugin</code> from <code>nuxt-config.js</code>: <code>plugins: [&quot;@/plugins/bootstrap-vue&quot;],</code></li>
  </ol>
  <p>** Installing plaing old Bootstrap **
  Added following CDN links to my <code>nuxt-config.js</code> file:</p>
  <pre><code>script: [
        {
          src: &quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;
        },
        {
          src:
            &quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&quot;
        }
  ]
  </code></pre>
  <pre><code>link:[
        {
          rel: &quot;stylesheet&quot;,
          href:
            &quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot;
        },
        {
          rel: &quot;stylesheet&quot;,
          href:
            &quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css&quot;
        }]
  </code></pre>
  <p>After doing these things when I create a simple modal using <code>Boostrap</code> and add drop-down to it, it does not display anything on the modal</p>
  <p>Can someone please confirm if I am following proper workflow or am I missing something? Any help or recommendation would be really helpful.</p>
  <p>*** <strong>UPDATED</strong> ***</p>
  <p>Following is my <code>nuxt-config.js</code> file:</p>
  <pre><code>import colors from &quot;vuetify/es5/util/colors&quot;;
  
  export default {
    // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
      titleTemplate: &quot;%s - openepcis-test-data-generator-ui&quot;,
      title: &quot;EPCIS | Test Data Generator&quot;,
      htmlAttrs: {
        lang: &quot;en&quot;
      },
      meta: [
        { charset: &quot;utf-8&quot; },
        { name: &quot;viewport&quot;, content: &quot;width=device-width, initial-scale=1&quot; },
        { hid: &quot;description&quot;, name: &quot;description&quot;, content: &quot;&quot; },
        { name: &quot;format-detection&quot;, content: &quot;telephone=no&quot; }
      ],
      script: [
        /* {
          src: &quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;
        },
        {
          src:
            &quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&quot;
        }*/
      ],
      link: [
        { rel: &quot;icon&quot;, type: &quot;image/x-icon&quot;, href: &quot;/Logo.ico&quot; },
        {
          rel: &quot;stylesheet&quot;,
          href:
            &quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css&quot;
        }
        /* {
          rel: &quot;stylesheet&quot;,
          href:
            &quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot;
        },
        {
          rel: &quot;stylesheet&quot;,
          href:
            &quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css&quot;
        }*/
      ]
    },
  
    // Global CSS: https://go.nuxtjs.dev/config-css
    css: [&quot;@/assets/css/styles.css&quot;],
  
    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
    plugins: [&quot;@/plugins/bootstrap-vue&quot;],
  
    // Auto import components: https://go.nuxtjs.dev/config-components
    components: true,
  
    // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
    buildModules: [
      [
        &quot;@nuxtjs/eslint-module&quot;,
        {
          fix: true
        }
      ],
      [&quot;@nuxtjs/vuetify&quot;],
      [&quot;@nuxtjs/dotenv&quot;]
    ],
  
    // Modules: https://go.nuxtjs.dev/config-modules
    modules: [&quot;@nuxtjs/axios&quot;],
  
    // Axios module configuration: https://go.nuxtjs.dev/config-axios
    axios: {
      baseURL: process.env.API_URL,
      headers: {
        &quot;Content-Type&quot;: &quot;text/plain&quot;
      }
    },
  
    // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
    vuetify: {},
  
    // Build Configuration: https://go.nuxtjs.dev/config-build
    build: {
      babel: {
        plugins: [
          [&quot;@babel/plugin-proposal-class-properties&quot;, { loose: true }],
          [&quot;@babel/plugin-proposal-private-methods&quot;, { loose: true }],
          [&quot;@babel/plugin-proposal-private-property-in-object&quot;, { loose: true }]
        ]
      }
    },
  
    server: {
      port: 5000
    }
  };
  
  </code></pre>
  <p>I have following things in my <code>plugins/bootstrap-vue.js</code>:</p>
  <pre><code>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)
  
  </code></pre>
  <p>Apart from that following is code for modal:</p>
  <pre><code>&lt;template&gt;
    &lt;div v-if=&quot;$store.state.showModal&quot;&gt;
      &lt;transition name=&quot;modal&quot;&gt;
        &lt;div class=&quot;modal-mask&quot;&gt;
          &lt;div class=&quot;modal-wrapper&quot;&gt;
            &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
              &lt;div class=&quot;modal-content&quot;&gt;
                &lt;div class=&quot;modal-header&quot;&gt;
                  &lt;h5 class=&quot;modal-title&quot;&gt;
                    Add Options
                  &lt;/h5&gt;
                  &lt;button
                    type=&quot;button&quot;
                    class=&quot;close&quot;
                    data-dismiss=&quot;modal&quot;
                    aria-label=&quot;Close&quot;
                  &gt;
                    &lt;span
                      aria-hidden=&quot;true&quot;
                      @click=&quot;hideModal&quot;
                    &gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
                &lt;/div&gt;
                &lt;div class=&quot;modal-body&quot;&gt;
                  &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
                    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
                    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
                    &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;button
                    type=&quot;button&quot;
                    class=&quot;btn btn-secondary&quot;
                    @click=&quot;hideModal&quot;
                  &gt;
                    Close
                  &lt;/button&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;
                    Save changes
                  &lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/transition&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    components: {},
    data () {
      return {}
    },
    methods: {
      hideModal () {
        this.$store.commit(
          'hideModal'
        )
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  
  </code></pre>