Having issues with dynamic components in Nuxt using Bootstrap 5

I've been working on integrating Bootstrap 5 into my Nuxt project.

While the styles are coming through perfectly, anything that previously relied on jQuery is not functioning as expected.

The steps I followed for installation:

  1. Downloaded files from the Bootstrap download page

  2. Set up /css and /js folders within the asset directory

  3. Moved bootstrap.css to the /css folder and bootstrap.min.js to the /js folder

  4. Added configuration settings to the nuxt.config.js file:

css: [
   '@/assets/css/bootstrap.css'
],

js: [
   '@/assets/js/bootstrap.min.js'
],
  1. Refreshed the site multiple times.

This is a code snippet I'm testing directly from the Bootstrap components documentation:

// index.vue
<div class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown button
   </button>
   <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
   </ul>
</div>
javascriptcssnuxt.jsbootstrap-5

Answer №1

Instead of making changes to your nuxt.config.js file, consider the following alternative approach:

  1. Add the code snippet provided below to the script section in layouts/default.vue
  2. Place the minified js and css bundle files for Bootstrap 5 in the /static/bootstrap directory
<script>

export default {
  data () {
    return {

    }
  },

  head () {
    return {
      title: 'Test Page - My amazing project',
      link: [
        { rel: 'stylesheet', href: '/bootstrap/bootstrap.min.css' }
      ],
      script: [
        { src: "/bootstrap/bootstrap.bundle.min.js", type: "text/javascript"}
      ]

    }
  }


}
</script>

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

Reveal a segment of a picture

Is there a way to display only a section of an image using either jQuery or another JavaScript method? For example: image: [ ] [ -------- ] [ - - ] [ - part - ] [ - - ] [ -------- ] [ ...

javascriptjqueryimage

Integrate Angular 2 into the current layout of Express framework

After generating an express structure with express-generator, I ended up with the standard setup: bin bld node_modules public routes views app.js package.json Now, I want to enhance the views and routes directories by organizing them as follows: v ...

javascriptnode.jsexpressangulartypescript

Determine the number of rows in an Excel spreadsheet using JavaScript

Currently, I am working on a codeigniter project where I need to upload an Excel file. However, before uploading the file, I want to display the number of records it contains. To achieve this, I decided to create a function within my script and then call t ...

javascriptphpexcelcodeigniter

What does ngModel look like without the use of square brackets and parenthesis?

Can you explain the usage of ngModel without brackets and parentheses in Angular? <input name="name" ngModel> I am familiar with [ngModel] for one-way binding and [(ngModel)] for two-way binding, but I am unsure what it means when ngModel ...

javascriptangulartypescript

The .load() function is compatible with Internet Explorer and Dreamweaver for preview, however, it does not work

Having trouble getting this code to work in Chrome, and it's crucial for my Android development. Can anyone spot the error? I simply need to load 'page1.html' into '#container1'. It should be a simple task, and it was working fine ...

javascriptjqueryajaxgoogle-chromeload

The instantiation of the cloudinary module failed because of an error with the injector

I am currently developing a MEAN application based on the template provided by Linnovate. You can find the template at https://github.com/linnovate/mean My goal is to integrate a module called Cloudinary into my application. To achieve this, I followed th ...

javascriptnode.jsangularjsbowercloudinary

The jQuery prop method seems to be malfunctioning

Here is the HTML code snippet: <ul class="expander-list" id="category"> <li> <div class="radio" style="padding-left:0px"> <label> <input type="checkbox" id="all" ...

javascriptjqueryhtml

Ways to create CSS styles dynamically in PHP using database-driven methods

Currently, I am in the process of developing an application that gives users the ability to select different style options within the app. These choices will then be utilized to create a dynamic web page. I am curious about the various methods available to ...

phpcssstylesheet

Error: The React Material-UI modal is encountering a type error where it cannot access the property 'hasOwnProperty' of an undefined value

Whenever I include a modal in one of my classes, I encounter this error. Error: Unable to access property 'hasOwnProperty' of undefined Here is a simple example where I am attempting to display a basic modal at all times. Any suggestions? I h ...

javascriptreactjsmaterial-ui

In Angular, the ng-click directive that assigns the value of tab to $index does not seem to be functioning properly

I encountered an issue within my app <li ng-repeat="name in tabs track by $index" ng-class="{selected: tab==$index}" ng-click="tab = $index">{{name}}</li> After clicking on each item, the selected class remains enabled and switching to anothe ...

javascriptangularjs

Guide on transferring input element to h3 tag without using the URL

Is there a way to update the h3 tag every time a user clicks without updating the tab URL? I only want to update the h3 tag. I have attached all files and a screenshot of the URL. <!DOCTYPE html> <html> <head> </head> ...

javascript

The proper method for converting an AxiosPromise to a standard Promise without falling into the promise constructor anti pattern

Here is a TypeScript function example: public load(filter: IFilter): Promise<Material[]> { return axios.get<Material[]>("data.json"); } When using TypeScript, an error may occur due to incompatible types: [ts] Type 'AxiosPromise< ...

javascripttypescriptpromise

Nuxt's hot reloading feature seems to be malfunctioning when it comes to adding new

For some reason, Nuxt hot reloading is working fine for existing components but it's not detecting any new components that I created today. I have to keep restarting the app to see the changes I made to these new files. I am using a MacOs running the ...

vue.jsvuejs2nodemonnuxt.js

rearranging nodes from multiple arrays into a single array and then repositioning them within the parent array using angularjs

[![enter image description here][1]][1]I am working with AngularJS and I have multiple arrays named list1, list2, and list3. Each array is used in a different list. Within my application, there are two buttons and two divs - the left div displays elements ...

javascripthtmlcssangularjs

Utilize text-to-speech technology to convert the output results into

Looking for a way to live stream a text to speech message triggered by a button press on your website? Unsure how to accomplish this with Node.js and generate the file after the button press? Let's explore some solutions together. ...

javascriptphpnode.jshtml

Executing Passport.js for Authentication

I've been trying to understand passport.js by watching tutorials online, but I'm still confused. Can someone clarify my doubts below? Please read the paragraph at the bottom first. If everything is set up correctly, this is how the login strateg ...

javascriptnode.jsexpresspassport.jspassport-local

Using JavaScript and the PapaParse library, you can easily convert CSV data into an array

My current task involves using Papaparse to convert a csv file into a json object. The API requires the data to be structured like this: "data": [ { "id": 1, "nombre": "AGUASBLANCAS-AGB&qu ...

javascriptjsonpapaparse

When viewed on mobile browsers, the side-by-side divs in a tabbed layout appear to be

Looking for some help with responsive design for the "PORTFOLIO ATTRIBUTES" tab on my website. On desktop, the content displays fine, but on mobile it overlaps and cuts off. Here's the link to the page in question: . Any suggestions on how to maintai ...

htmlcssresponsive-design

Establish characteristics for the temporary print document

Struggling to configure the properties of a temporary file created for later printing by the user. Here's a breakdown of the process: User clicks on "Print Map Area" button on the website. A menu appears asking for preferred dimensions (e.g. A4 ...

phpjavascriptopenlayers

Utilizing v-model alongside various JavaScript plugins within a single select element

I've incorporated the jQuery plugins select2 and datepicker into my project, utilizing custom directives for them. Everything was functioning smoothly until I attempted to retrieve the selected value using v-model, which resulted in a failure to bind ...

javascriptvue.jsjquery-ui-datepickerjquery-select2vuejs2