Nuxt JS に Bootstrap 4 / Bootstrap Native を導入

バージョンこんな感じ

$ node -v
v12.8.0
$ npx nuxt -v
@nuxt/cli v2.9.1

パッケージをインストール

yarn add node-sass sass-loader bootstrap bootstrap.native bootstrap.native-loader

Bootstrap の css をロードする設定を assets/sass/common.sass に記述（ファイル名はなんでもOK。既存のファイルに追記してもOK）

@import "~~/node_modules/bootstrap/scss/bootstrap.scss"

Bootstrap Native を Vue に注入するプラグインを plugins/bootstrap-native.js に作成。Nuxt の mounted() などから this.$bs で Bootstrap の機能にアクセス出来るようにします

import Vue from 'vue'
import * as bs from '~~/node_modules/bootstrap.native/dist/bootstrap-native-v4.min.js'
Vue.prototype.$bs = bs

nuxt.config.js を修正、先ほどの css とプラグインを導入する

export default {
  css: [
    '~assets/sass/common',
  ],
  plugins: [
    '~plugins/bootstrap-native',
  ],
}

動作確認用のページを pages/bs.vue に作成

<template>
  <div id="modalID" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          Welcome to Bootstrap 4!
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">× </span></button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    const el = document.getElementById('modalID')
    const modal = new this.$bs.Modal(el)
    modal.show()
  }
}
</script>