CODEWITHSUNDEEP
nuxt.jsbootstrap-5vite
Mathieu
Mathieu

Reputation: 219

Integrating bootsrap 5 in Nuxt 3 and Vite

I'm trying to integrate Bootstrap 5 in a new Nuxt 3 project but I'm facing a problem that I cannot solve : I want to optimise it by importing only the necessary modules (both scss and javascript) as explained here : https://getbootstrap.com/docs/5.0/customize/optimize/.

I successfully imported the style but I cannot find a proper way to import the necessary js. I have created a bootstrap.js file in the public directory as following :

// import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/dropdown';
// import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

And added this file in the meta section of nuxt.config.ts to make sure the file is called in the head section of my page so the javascript is available everywhere

meta: {
    script: [
        { src: 'js/bootstrap.js' }
    ],
}

But I keep having an error :

Uncaught SyntaxError: Cannot use import statement outside a module

I understand it is because Vite does not compile it, but I don't know how to make it do so.. has someone an idea how to do it ? Thanks !

Upvotes: 11

Views: 26839

Answers (9)

Travinns
Travinns

Reputation: 273

There still seem to be a lot of people having trouble getting bootstrap 5 to run in Nuxt 3 so first of as reference here is a starter project that has it all running:

https://github.com/maxvanweenen/Nuxt-3-bootstrap-5-starter

Most people get bootstrap 5 css to work, but not the JS. The most important step to get this working is including both bootstrap and Popper in your installation:

npm i --save bootstrap @popperjs/core

and then registering it as a plugin by making a 'plugins' directory in the root of your project and adding a file like 'useBootstrap.client.ts' (the 'client' part will tell Nuxt to not use this on the server side).

// useBootstrap.client.ts    
import * as bootstrap from 'bootstrap'

export default defineNuxtPlugin(() => {
    return {
        provide: {
            bootstrap: bootstrap
        }
    }
})

Now you only need to add the css to the nuxt config:

export default defineNuxtConfig({
css: [
    '~/assets/scss/main.scss'
]

})

And create a main.scss within assets/scss.

Some extra important information:

Installation of fibers is not mentioned in bootstrap documentation but synchronous compilation with sass (2x speed increase) is enabled automatically when fibers is installed. so it is recommended to run:

npm install fibers

Also if you want to customise or add theme colors in this setup you will do that like this:

// set theme colors
$primary: #ce2127;
$dark: #212121;
$theme1: #33a8d1;

// add custom colors to the bootstrap theme
$custom-theme-colors: (
        "theme1": $theme1,
        "white": $white
);

// fix for bootstrap transposing colors
$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

If anybody has still any trouble getting it to run after this let me know!

Upvotes: 1

Tran Hoang Hiep
Tran Hoang Hiep

Reputation: 584

Share and Voted

  1. using cdn with app head
  

      app: {
            head: {
       
              link: [
                {
                  rel: "stylesheet",
                  href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
                  integrity: "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD",
                  crossorigin: "anonymous"
                }
              ],
              script: [
                {
                  src: "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
                  integrity: "sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3",
                  crossorigin: "anonymous"
                },
                {
                  src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js",
                  integrity: "sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD",
                  crossorigin: "anonymous"
                }
              ]
        
            },
          },
  1. OR dowload css and js bootstrap to public folder/bootstrap and using in head.
 

app: {
    head: {
      title: 'My awesome project', // Other meta information
      link:[
        {
          rel: "stylesheet",
          href: "bootstrap/bootstrap.min.css",
        }
      ],
      script: [
        {
          src: "bootstrap/popper.min.js",
          crossorigin: "anonymous"
        },
        {
          src: "bootstrap/bootstrap.min.js",
          crossorigin: "anonymous"
        }
      ]

    }
 }

Upvotes: 0

Lucas David Ferrero
Lucas David Ferrero

Reputation: 1902

If you are prototyping and want to include the CDNs, try this in your nuxt.config.ts

export default defineNuxtConfig({
    app: {
        head: {
            link: [
                {
                    rel: 'stylesheet',
                    href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
                    integrity: 'sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD',
                    crossorigin: 'anonymous'
                }
            ],
            script: [
                {
                    src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',
                    integrity: 'sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN',
                    crossorigin: 'anonymous'
                }
            ],
        }
    }
})

Upvotes: 1

morteza.marivani
morteza.marivani

Reputation: 51

export default defineNuxtConfig({
  css: ["bootstrap/dist/css/bootstrap.min.css"], // add
  vite: {
    define: {
      "process.env.DEBUG": false,
    },
  },

  app: {
    head: {
      script: [
        {
          src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js",
          type: "text/javascript",
        },
      ],
    },
  },
});

please copy this code in the file nuxt.config.ts

Upvotes: 1

cyril
cyril

Reputation: 1017

Here an example with bootstrap5 and Nuxtjs3 (css and js), popper is not required as include in Bundle (tested) and Jquery no longer required.

yarn install bootstrap5

then create in plugins directory file

"useBootstrap.client.ts"

import * as bootstrap from 'bootstrap'

export default defineNuxtPlugin(() => {
    return {
        provide: {
            bootstrap: bootstrap
        }
    }
})

then you can import css in scss file or directly in (i made both)

"nuxt.config.ts"

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    css: ["bootstrap/dist/css/bootstrap.min.css","~/assets/styles/main.scss"],
    
})

You can directly add component, modal, dropdown etc, if you want to exclude some imports, do it in the plugin file.

Upvotes: 3

Javaid
Javaid

Reputation: 375

  1. yarn add bootstrap
  2. Create plugins/useBootstrap.client.ts file and paste the following code
import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.provide('bootstrap', bootstrap)
})

  1. Run this command yarn add --dev sass sass-loader@latest

  2. Create assets/styles/main.scss file and paste following code

@import "bootstrap/scss/bootstrap";
  1. Add the following code in nuxt.config.ts
export default defineNuxtConfig({
    css: ['~/assets/styles/main.scss'],
})
  1. If you want to use the js-dependent content like dropdown, modals then you have to install yarn add --dev @popperjs/core OR npm install --save @popperjs/core

Note: You can customize the bootstrap in the main.scss file

Upvotes: 24

Alpha Huang
Alpha Huang

Reputation: 1477

  1. Install Bootstrap,

    npm install bootstrap

  2. Config nuxt.config.ts,

    export default defineNuxtConfig({
  css: [
    'bootstrap/dist/css/bootstrap.min.css'
  ],
  script: [
    {
      src: 'bootstrap/dist/js/bootstrap.bundle.min.js'
    }
  ],
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

Upvotes: 1

basicactor
basicactor

Reputation: 21

if you have not solved yet, try this way. It works for me.

  1. Install bootstrap5
yarn add bootstrap
  1. Change the nuxt config settings (nuxt.config.ts)
import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ["bootstrap/dist/css/bootstrap.min.css"], // add
  vite: {
    define: {
      "process.env.DEBUG": false,
    },
  },
});
  1. See if the styles is applied. (app.vue)
<template>
  <div class="m-5">
    <!-- <NuxtPage /> -->
    <div class="btn btn-success">Success</div>
    <div class="btn btn-danger">Danger</div>
    <div class="btn btn-warning">Warning</div>
  </div>
</template>

Upvotes: 2

Debonet
Debonet

Reputation: 11

You can import necessary bootstrap js in a client-side project.

plugins/bootstrap.client.ts

import { Modal } from "bootstrap";

export default defineNuxtPlugin(() => ({
  provide: {
    bootstrap: {
      Modal,
    },
  },
}));

app.vue

<template>
  <div>
    <button class="btn btn-primary" @click="toggle()">toggle modal</button>
    <div class="modal fade" id="modal-main">
      <div class="modal-dialog modal-dialog-centered" style="max-width: 600px">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Hello world!</h5>
            <button
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body p-4">Hello bootstrap and nuxt</div>
          <div class="modal-footer">
            <button class="btn btn-outline-secondary" data-bs-dismiss="modal">
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Modal } from "bootstrap";
const { $bootstrap } = useNuxtApp();

let modal: Modal;
onMounted(() => {
  modal = new $bootstrap.Modal(document.getElementById("modal-main"));
});

const toggle = () => {
  modal.toggle();
};
</script>

this is a sample project, which includes only the necessary styles and js for bootstrap modal, about 60KB on first screen loading.

https://github.com/Debonex/samples/tree/master/nuxt3-bootstrap5

Upvotes: 1

Related Questions