Nuxt.js snippet for bootstrap, bootstrap-vue, popper and jquery configuration
Especial thanks to kaloraat for his article: https://kaloraat.com/articles/how-to-use-jquery-in-nuxtjs
Nuxt.js snippet for bootstrap, bootstrap-vue, popper and jquery configuration
Especial thanks to kaloraat for his article: https://kaloraat.com/articles/how-to-use-jquery-in-nuxtjs
// Plugin for bootstrap import | |
// Path: plugins/bootstrap.js | |
import "bootstrap/dist/css/bootstrap.min.css"; | |
import "bootstrap/dist/js/bootstrap.min.js"; |
<template> | |
<div class="container"> | |
<!-- Sample page using bootstrap-vue components and pure bootstrap --> | |
<!-- Path: pages/bootstrap.vue --> | |
<b-row> | |
<b-col> | |
<div class="dropdown"> | |
<button | |
class="btn btn-secondary dropdown-toggle" | |
type="button" | |
id="dropdownMenuButton" | |
data-toggle="dropdown" | |
aria-haspopup="true" | |
aria-expanded="false" | |
>Dropdown button</button> | |
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> | |
<a class="dropdown-item" href="#">Action</a> | |
<a class="dropdown-item" href="#">Another action</a> | |
<a class="dropdown-item" href="#">Something else here</a> | |
</div> | |
</div> | |
</b-col> | |
</b-row> | |
<b-row> | |
<b-col> | |
<b-button v-b-tooltip.hover title="Tooltip directive content">Hover Me</b-button> | |
<b-button id="tooltip-target-1">Hover Me</b-button> | |
<b-tooltip target="tooltip-target-1" triggers="hover"> | |
I am tooltip | |
<b>component</b> content! | |
</b-tooltip> | |
</b-col> | |
</b-row> | |
<b-row> | |
<b-col> | |
<b-tabs content-class="mt-3"> | |
<b-tab title="First" active> | |
<p>I'm the first tab</p> | |
</b-tab> | |
<b-tab title="Second"> | |
<p>I'm the second tab</p> | |
</b-tab> | |
<b-tab title="Disabled" disabled> | |
<p>I'm a disabled tab!</p> | |
</b-tab> | |
</b-tabs> | |
</b-col> | |
</b-row> | |
<b-row> | |
<b-col> | |
<b-button | |
v-b-popover.hover.top="'I am popover directive content!'" | |
title="Popover Title" | |
>Hover Me</b-button> | |
<b-button id="popover-target-1">Hover Me</b-button> | |
<b-popover target="popover-target-1" triggers="hover" placement="top"> | |
<template v-slot:title>Popover Title</template> | |
I am popover | |
<b>component</b> content! | |
</b-popover> | |
</b-col> | |
</b-row> | |
</div> | |
</template> | |
<style lang="scss"> | |
.row { | |
margin-top: 1em !important; | |
} | |
</style> |
// Nuxt config extract | |
// Path: nuxt.config.js | |
const webpack = require('webpack'); | |
export default { | |
//IMPORTANT: Your existing config of Nuxt.js go here | |
//IMPORTANT: If you have another plugins configured, append this to the array. | |
/* | |
** Plugins to load before mounting the App | |
*/ | |
plugins: [ | |
'~plugins/bootstrap.js', | |
], | |
/* | |
** Build configuration | |
*/ | |
build: { | |
/* | |
** You can extend webpack config here | |
*/ | |
extend(config, ctx) { | |
}, | |
plugins: [ | |
new webpack.ProvidePlugin({ | |
$: 'jquery', | |
jQuery: 'jquery', | |
'window.jQuery': 'jquery', | |
Popper: ['popper.js', 'default'], | |
}), | |
], | |
} | |
} |