What is the correct way to configure bootstrap-vue in my Nuxt application?

As a newcomer to developing applications with Nuxt.js, I am currently working on building a web application using Nuxt.js and Vue.js. In the process of setting up my project with the Nuxt CLI, I decided to include Bootstrap-vue. However, I encountered issues while trying to create a Bootstrap modal, prompting me to remove Bootstrap-vue entirely from my application and revert to plain old Bootstrap.

Despite following some answers provided online for removing Bootstrap-vue and adding Bootstrap, I am still facing problems. It seems that I have not successfully removed Bootstrap-vue and integrated Bootstrap properly into my project, as I am experiencing display issues with modals and dropdowns.

If anyone could assist by pointing out any missed steps or errors in my workflow, it would be greatly appreciated:

** Removal of Bootstrap-vue ***

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

** Installing plain old Bootstrap **

I added the 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 making these adjustments, attempts to create a simple modal using Bootstrap and add a dropdown within it result in nothing being displayed within the modal.

Could someone please verify whether I am following the correct workflow or if there are missing components? Any guidance or suggestions would be immensely helpful.

*** UPDATED ***

Here is an excerpt from my nuxt-config.js file:

...

In addition, this snippet represents the contents of 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)

Lastly, here is the code pertaining to the modal:

...
csstwitter-bootstrapvue.jsnuxt.jsbootstrap-vue

Answer №1

If you're unsure about using Vuetify + BoostrapVue together, you can create a new project by running 

npx create-nuxt-app my-awesome-project
and choose BootstrapVue during the setup process.

Alternatively, you can refer to the instructions provided here:

To integrate BootstrapVue into your project, run yarn add bootstrap-vue
Then include the following in your nuxt.config.js file:

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

The first example in the documentation demonstrates this integration effectively

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The fade transition will only begin once I have clicked the toggle button to make the modal appear two times

Currently, I am attempting to launch a modal and wish to include a transition element that prompts the user to scroll in order to fade out: <v-bottom-sheet v-if="sheet"> <v-card> <v-card-title>Hello world</v-card- ...

vue.jsvuetify.js

When adding margin-left and margin-right, images do not appear in their designated positions

I have a chart displaying images, which are showing up correctly. However, I am facing an issue when I try to add some spacing to the chart by using margin-left and margin-right. Here is the CSS code I included: #chart1 { margin: 0 auto; ...

javascripthtmlcss

Is there a way for me to determine the proportion of my tests that are covered?

I am eager to determine the coverage of my project through my tests, and I am currently experimenting with the use of jest for this purpose. Here is the content of my jest.config.js: module.exports = { verbose: true, preset: '@vue/cli-plugin-unit ...

javascriptvue.jsjestjs

Achieve full height for the span tag within a div using CSS styling

I am facing a particular scenario: In a bootstrap row with 2 columns: - the first column contains a table with a button to add new rows - the second column has a label and a span (although it doesn't have to be a span) Both columns have equal hei ...

htmlcsstwitter-bootstrap

Extract SCSS import filepaths using NPM and Gulp

Currently, in my gulp setup, I have several CSS files being produced - a general 'core' one, and then template-specific stylesheets. Instead of re-compiling all stylesheets with each change, the setup only compiles the necessary ones. However, t ...

cssnpmsassgulp

A Firefox Browser View of a Next.js and Tailwind Website magnified for closer inspection

After creating a website using Next.js and Tailwind CSS, I noticed that the site is appearing zoomed in when viewed in Firefox. However, it looks fine in all other browsers. When I adjust the screen to 80%, the website displays correctly in Firefox. What ...

javascripthtmlcssreactjsnext.js

Bootstrap column height problem arises when the second column contains added margin, padding, or is wrapped in another element

I am facing an issue with a two-column layout where one column serves as the page heading (left) and the other displays breadcrumbs (right). The problem arises when the first column fails to stretch its height fully due to padding or margin in the second c ...

htmlcssbootstrap-5

Troubleshooting Checkbox Validation Problem in Vue JS

Deactivating Vue js Validation In the following piece of code, I am trying to disable a checkbox when item.status == "active". I attempted to use :disbale="item.status='active'"" in my checkbox. With this code snippet, the ...

vue.js

Hide the 'white' color on visited links and category tags in the WordPress blog page

I created a custom WordPress theme, and I am having trouble styling the bootstrap navigation. I want the text to be white and change to brown when selected. However, my attempts to add a separate class for H1 tags on the blog post page have not been succes ...

csswordpressclassblogs

How can we bring in a function into a Vue component?

I'm currently facing an issue with importing a single function into my Vue component. To tackle this problem, I separated the function into its own js file: randomId.js: exports.randomId = () => //My function ... Within my Vue component, I attem ...

javascriptwebpackvue.jsecmascript-6

Ways to create spacing between property columns in MUI grid fashion

Is there a way to achieve space-between alignment when elements are stacked vertically in MUI Grid instead of using flex? I've come across suggestions involving giving flex:1 and height:100%, but I'm specifically interested in achieving this with ...

cssmaterial-ui

Tips on implementing SCSS styles in my create-react-app application along with Material UI components?

I recently developed a React app using Create-React-App, and now I am looking to incorporate Material UI with styling through SCSS. https://i.sstatic.net/JLEjX.png To manage my styles, I created a main.css file using node-sass. While attempting to apply ...

cssreactjssassmaterial-ui

Embed the json data within the modal box

I received a JSON response from a php function, and it looks like this: [{"id":"15","activity_type":"call","activity_title":"Call to check "}] Below is the script that triggers the request (actvitiy.js) (Edited) $(document).on("click", ".view_contact_ac ...

javascriptjqueryjsontwitter-bootstrap

What is the best approach for retrieving and storing data in Vuex when working with multiple components containing input fields in Vue Router?

In the Vue CLI project I'm working on, there's a route called Settings which has 3 child components: SettingsA, SettingsB, and SettingsC. Each of these child components consists of approximately 15 input fields, making it impractical to include a ...

vue.jsaxiosvuexvue-routervue-cli

I am experiencing issues with the loading of CSS and JavaScript files in my recently created Laravel project

Recently, I received a Laravel project and successfully downloaded its configuration to get it up and running using php artisan serve. Upon attempting to access the project through localhost:8000, only the HTML content is displayed without any styling fro ...

phpcsslaravelbootstrap-4dependencies

Play button icon is missing in Firefox when using absolute positioning

I'm currently experiencing an issue with my video gallery section. I have both normal and hover versions of a play button positioned above a preview image of a video. However, the play buttons are not visible at all in Firefox. You can view the page h ...

csscss-position

Change SVG path data into a range of 0 to 1 in order to utilize it as a clip path with objectBoundingBox

My SVG shape, exported from Illustrator as a clipping path, is quite complex. The issue I'm facing is that objectBoundingBox restricts path data to the 0-1 range, but my path data exceeds this range. Here is the current code I'm using: <svg& ...

htmlcsssvg

Connect PHP code to an HTML document

Recently, I created an entry form login page saved as a .php file which displays content in html and css. The page showcases various elements followed by a login form with two fields: Username, Password, and a 'Log in' button. Additionally, I ha ...

phphtmlcssxampp

Is it possible for a CSS block to incorporate another block within it?

Is it possible to apply styles like this in CSS? .bordered { border: 10px dashed yellow; } form input { use .bordered; font-size: 10px; } Alternatively, how can I achieve this without directly embedding each CSS code block in the HTML ele ...

htmlcss

DataTables.js, the powerful JavaScript library for creating interactive tables, and its compatible counterpart

I'm currently making some changes to a dynamic table that require enabling a vertical scroll bar. As a result, I need to implement this vertical scroll bar mechanism on an existing table. The code in our project utilizes dataTables.js version 1.5.2 ...

javascriptjqueryhtmlcss