Integrating bootsrap 5 in Nuxt 3 and Vite

user_8713878 0
Viewed 4370

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 !

bootstrap-5 vite nuxt.js
4 Answers
  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'],
})

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

user_116740060

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

user_111092120

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

  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,
    },
  },
})
user_29041880
Related