Menu
This is a part of my nuxt.config.js file:
head: {
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
// load bootsttrap.css from CDN
//{ type: 'text/css', rel: 'stylesheet', href: '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' },
]
},
css: [
// this line include bootstrap.css in each html file on generate
'bootstrap/dist/css/bootstrap.css',
'assets/main.css'
],
In this case bootstrap.css included in each html file on nuxt generate. For resolve it I comment line 'bootstrap/dist/css/bootstrap.css' in css section and uncomment rel stylesheet line in link section.
After this bootstrap.css file loaded from CDN and not included in html files. So, I think it not is very well idea.
How copy bootstrap.css from 'node_modules/bootstrap/dist/...' to '~/assets' on build, and after this, load it from here?
612
Under the folder, copy the extracted files downloaded from bootstrap. Under the head tag of the HTML file, the CSS needs to be linked. The jQuery downloaded should also be copied under the JS file. Make sure that under the project file, the downloaded files and HTML page must be present in that folder.
How to Use Bootstrap CSS. In order to use Bootstrap CSS, you need to integrate it into your development environment. To do that, you simply need to create a folder on your computer. In that folder, save your compiled CSS and JS files and a new HTML file where you'll load Bootstrap.
With BootstrapVue you can build responsive, mobile-first, and ARIA accessible projects on the web using Vue. js and the world's most popular front-end CSS library — Bootstrap v4. Bootstrap v4 is the world's most popular framework for building responsive, mobile-first sites. Vue.
This is the simplest way I have found to include the regular Bootstrap version (not Bootstrap-Vue) in your Nuxt.js project. First, install Bootstrap from your Nuxt.js project directory (I'm using version 5.0.0-beta2):
npm install bootstrap
Then, in nuxt.config.js file, include Bootstrap's CSS and Javascript like this:
css: [
"~/node_modules/bootstrap/dist/css/bootstrap.min.css"
],
plugins: [
{ src: "~/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js", mode: "client" }
],
Note the mode: "client" flag which indicates that the Javascript should only be run on the client. This prevents a ReferenceError: document is not defined error that happens because Bootstrap is not compatible with server side rendering.
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
