Nuxt.js snippet for bootstrap, bootstrap-vue, popper and jquery configuration

01_nuxt-bootstrap-vue-with-pure-boostrap.md

Nuxt.js configuration using bootstrap-vue with pure boostrap code

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

bootstrap.js

// Plugin for bootstrap import
// Path: plugins/bootstrap.js

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";

bootstrap.vue

<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.js

// 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'],
      }),
    ],
  }
}