pankovalxndr
pankovalxndr

Reputation: 161

How to connect native bootstrap 5 js(modal) to nuxt.js?

I making a project in nuxt.js,here is its nuxt.config.js

export default {

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'Проект',
    htmlAttrs: {
      lang: 'ru'
    },
    meta: [
      {charset: 'utf-8'},
      {name: 'viewport', content: 'width=device-width, initial-scale=1'},
      {hid: 'description', name: 'description', content: ''}
    ],
    link: [
      {rel: 'icon', type: 'image/png', href: '/favicon.png'}
    ]
  },


  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    {src: '~/assets/css/common.scss', lang: 'sass'}
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    {src: '~/plugins/bootstrap.js', mode: 'client'}
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    '@nuxtjs/fontawesome',
  ],

  fontawesome: {
    icons: {
      solid: true,
      regular: true,
      brands: true
    }
  },

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: ['@nuxtjs/axios', '@nuxtjs/proxy', 'cookie-universal-nuxt'],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},

}

package.json

"dependencies": {
    "@fortawesome/fontawesome-free-solid": "^5.0.13",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^2.0.2",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/proxy": "^2.1.0",
    "@popperjs/core": "^2.9.2",
    "bootstrap": "^5.0.1",
    "cookie-universal-nuxt": "^2.1.5",
    "core-js": "^3.16.0",
    "moment": "^2.29.1",
    "nuxt": "^2.15.7",
    "popper.js": "^1.16.1",
    "reset-css": "^5.0.1",
    "vue-cool-lightbox": "^2.7.4",
    "vue-loading-skeleton": "^1.1.9",
    "vue-slick-carousel": "^1.0.6",
    "vue-yandex-maps": "^0.10.12"
  },
  "devDependencies": {
    "@fortawesome/fontawesome": "^1.1.8",
    "@nuxt/types": "~2.15.0",
    "@nuxtjs/fontawesome": "^1.1.2",
    "autoprefixer": "^10.3.1",
    "fibers": "^5.0.0",
    "postcss": "^8.3.6",
    "postcss-loader": "^4.2.0",
    "sass": "^1.36.0",
    "sass-loader": "^10.1.1"
  }

accordingly I have commands out of the box

"dev": "nuxt", "build": "nuxt build", "start": "nuxt start",

when I develop, they clean up "npm dev" and went to change files - everything works well as soon as I put together a project for sale, I see an error and run it more precisely, nuxt build is going to it without errors

but when I run nuxt start I see this

ERROR  document is not defined 

  at node_modules/bootstrap/dist/js/bootstrap.js:912:19
  at node_modules/bootstrap/dist/js/bootstrap.js:7:83
  at Object.<anonymous> (node_modules/bootstrap/dist/js/bootstrap.js:10:2)
  at Module.o._compile (node_modules/jiti/dist/v8cache.js:2:2778)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
  at Module.load (internal/modules/cjs/loader.js:928:32)
  at Function.Module._load (internal/modules/cjs/loader.js:769:14)
  at Module.require (internal/modules/cjs/loader.js:952:19)
  at n (node_modules/jiti/dist/v8cache.js:2:2472)
  at node_modules/vue-server-renderer/build.prod.js:1:77944

As I understand it, node.js crawls into the bootstrap.js file for some reason, it tries to initialize it, and inside there is a call to the document variable, but node.js does not have such a value - an error

I can’t figure out how to fix it and why I don’t see this error in dev mode?

content of plugins / bootstrap.js

import bootstrap from 'bootstrap';

ps: from bootstart, in addition to styles, I also use modal, collapse, tooltop ... I initialize them through JS (not data-attr) everything works as I need, but only in dev mode ...

There is a component that can be wrapped in the client-side inside this component there is a code like this

import {Modal} from 'bootstrap';
export default {...}

he breaks everything if you remove it, then there is no error, but there is no modal window either

Upvotes: 1

Views: 2080

Answers (1)

thegiovazz
thegiovazz

Reputation: 11

I finally found a way to fully integrate the Modals from Bootstrap 5 into Nuxt.js without having to disable the server side rendering. Now, I can invoke and manipulate a modal programmatically.

  1. Install Bootstrap using npm.
  2. Create a plugin (getBootstrapModal.js in my case).
     import Vue from 'vue'
        import { Modal } from 'bootstrap'
        
        Vue.mixin({
           methods: {
              getBootstrapModal(id) {
                 return new Modal(id)
              },
           },
        })
  1. Be sure to include the plugin as client-mode in your nuxt.config.js file.
    plugins: [{ src: '~/plugins/getBootstrapModal.js', mode: 'client' }],
  1. This way, you can now obtain a modal-object to use in your code like this.
    const yourModal = this.getBootstrapModal(yourModalId)
    

In my case, I have a component for the modal which emits an event when it's mounted.


<div
    :id="id"
    :ref="id"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    :aria-labelledby="id + '-label'"
    aria-hidden="true"
>

    (...myModalContent)

 </div>

 (...)

 mounted() {
     this.$emit('registeredModal', this.getBootstrapModal(this.$refs[this.id]))
 },

Then, in the parent component, i listen to that event and store the modal-object in my regular component data as follows.

    <SigningModal id="sign-modal" @registeredModal="modal = $event" />

    ...

    data() {
        return {
            modal: null,
        }
   },

Finally, when i want to show the modal, i call a method for that.

    openSigningModal() {
        this.modal.show()
    }

Upvotes: 1

Related Questions