Reputation: 161
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
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.
import Vue from 'vue'
import { Modal } from 'bootstrap'
Vue.mixin({
methods: {
getBootstrapModal(id) {
return new Modal(id)
},
},
})
plugins: [{ src: '~/plugins/getBootstrapModal.js', mode: 'client' }],
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