はじめに

世界で最も人気のあるフレームワークであるBootstrap v4をベースとしたBootstrapVueを使い、レスポンシブでモバイルファーストなサイトをVue.jsで構築する方法をご紹介します。

Vue.js v2.6 が必要です。 v2.6.12 を推奨します。
Bootstrap v4.3.1 が必要です。 v4.6.1 を推奨します。
Popper.js v1.16 は、ドロップダウン（およびドロップダウンに基づくコンポーネント）、ツールチップ、ポップオーバーに必要なものです。v1.16.1 を推奨します。
PortalVue v2.1 は Toasts に必要です。v2.1.7 を推奨します。
jQuery は**不要**です。

BootstrapVueリリースv2.23.0の新機能を確認してください。

以前のv2.0.0-rc.##リリースから移行する場合は、v2.0.0移行ガイドを参照してください。

ドキュメントセクション

オンラインドキュメントは以下を含みます。

コンポーネント - コンポーネントとコンポーネントプラグインのドキュメント
ディレクティブ - ディレクティブとディレクティブプラグインのドキュメント
アイコン - アイコンとアイコンプラグインのドキュメント v2.2.0+
リファレンス - リファレンス情報とドキュメント
プレイグラウンド - オンラインプレイグラウンド
テーマ - テーマとダッシュボード

前提条件

このBootstrapVueドキュメントでは、VueとBootstrap v4 CSSに精通していることを前提としています。これらに関する良い出発点は以下のとおりです。

Vueガイド
Vue API
Bootstrap v4.6ドキュメント
SFC（Single File Component）.vueファイルでスコープ付きスタイルを使用する場合は、Vueローダーのスコープ付きCSS。

ドキュメント情報

BootstrapVueのドキュメントに示されている多くの例では、ml-2、py-1などのCSSクラスの使用が見られる場合があります。これらは、パディング、マージン、位置合わせなどを制御するのに役立つBootstrap v4.6のユーティリティクラスです。これらのクラスに関する情報は、ユーティリティクラスリファレンスセクションにあります。

このドキュメントの多くの例は*ライブ*であり、場所を変更して編集することで、学習体験を向上させることができます（一部の例は、<template>セクションでES6 JavaScriptコードを使用しているため、IE 11では動作しない場合があります）。

BootstrapVueは、さまざまなコンポーネントを試したり、結果をJSFiddle、CodePen、CodeSandboxにエクスポートできるインタラクティブなプレイグラウンドも提供しています。

重要なHTMLグローバル設定

Bootstrap v4 CSSは、使用する必要があるいくつかの重要なグローバルスタイルと設定を使用しており、そのほとんどはクロスブラウザスタイルの正規化を目的としています。詳細については、次のサブセクションを参照してください。

HTML5ドキュメントタイプ

Bootstrapでは、HTML5ドキュメントタイプを使用する必要があります。それがないと、奇妙な不完全なスタイルが表示される場合があります。

<!doctype html>
<html lang="en">
  ...
</html>

レスポンシブメタタグ

Bootstrapは、最初にモバイルデバイス向けに最適化され、必要に応じてCSSメディアクエリを使用してコンポーネントを拡大します。すべてのデバイスで適切なレンダリングとタッチズームを確保するには、<head>に**レスポンシブビューポートメタタグ**を追加してください。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

CSS box-sizing

CSSでのサイズ設定をより簡単にするために、グローバルbox-sizing値はcontent-boxからborder-boxに変更されています。これにより、paddingが要素の最終的な計算された幅に影響を与えなくなりますが、GoogleマップやGoogleカスタム検索エンジンなどの一部のサードパーティソフトウェアで問題が発生する可能性があります。

まれに上書きする必要がある場合は、次のようなものを使用します。

.selector-for-some-widget {
  box-sizing: content-box;
}

上記のコードスニペットを使用すると、ネストされた要素（::beforeと::afterによる生成されたコンテンツを含む）はすべて、その.selector-for-some-widgetに対して指定されたbox-sizingを継承します。

CSS Tricksでボックスモデルとサイズ設定の詳細を学ぶ。

スタイルリブート

クロスブラウザレンダリングを改善するために、Bootstrap v4.6はRebootを使用して、ブラウザとデバイス間の矛盾を修正し、一般的なHTML要素に対するわずかにより意見のあるリセットを提供します。

モジュールバンドラーの使用

おそらく、Webpack、Parcel、またはrollup.jsなどのモジュールバンドラーを使用しているでしょう。これにより、パッケージをプロジェクトに直接簡単に含めることができます。これを行うには、npmまたはyarnを使用して、最新バージョンのVue.js、Bootstrap v4、BootstrapVueを入手します。

# With npm
npm install vue bootstrap bootstrap-vue

# With yarn
yarn add vue bootstrap bootstrap-vue

次に、アプリのエントリポイント（通常はapp.jsまたはmain.js）でBootstrapVueを登録します。

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

Bootstrapのテーマ設定

Bootstrapのデフォルトスタイル（例：$body-color）を変更する場合は、BootstrapとBootstrapVueのscssファイルを使用する必要があります。

独自のscssファイル（例：app.scss）を作成し、カスタム定義と、最後に2つの@importを含めます。

// Define variable defaults
$body-bg: #000;
$body-color: #111;

// Then import Bootstrap and BootstrapVue SCSS files (order is important)
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

次に、その単一のscssファイルをプロジェクトにインポートします。

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

個々のSCSSファイルをプロジェクトに個別にインポートしないでください。変数と関数はファイル間で共有されなくなります。

Bootstrapのテーマ設定については、テーマ設定リファレンスセクションを参照してください。

Vueインポートのエイリアシング

BootstrapVueとPortalVueは、グローバルVue参照（import Vue from 'vue'経由）へのアクセスを必要とします。

特定のVueビルド（つまり、ランタイムのみとコンパイラ+ランタイム）を使用している場合、バンドラー設定で'vue'へのエイリアスを設定して、プロジェクト、BootstrapVue、PortalVueですべて同じVueビルドバージョンを使用していることを確認する必要があります。"$attr and $listeners is readonly"や"Multiple instances of Vue detected"などのエラーが表示される場合は、エイリアスを設定する必要があります。

例：Vue CLIのvue.config.jsにおけるVueエイリアス

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      // If using the runtime only build
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      // Or if using full build of Vue (runtime + compiler)
      // path.resolve(__dirname, 'node_modules/vue/dist/vue.esm.js')
    )
  }
}

例：webpack.config.jsにおけるVueエイリアス

module.exports = {
  // ...
  resolve: {
    alias: {
      // If using the runtime only build
      vue$: 'vue/dist/vue.runtime.esm.js' // 'vue/dist/vue.runtime.common.js' for webpack 1
      // Or if using full build of Vue (runtime + compiler)
      // vue$: 'vue/dist/vue.esm.js'      // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

**注記：**プロジェクトに複数のwebpack設定ファイルがある場合（つまり、webpack.config.js、webpack.renderer.config.js、webpack.vendor.config.js、webpack.server.config.js、webpack.client.config.jsなど）、すべてに適切なエイリアスを設定する必要があります。

エイリアスの設定方法の詳細については、Vue.jsガイドを参照してください。webpack、rollup.js、Parcelなどの設定方法が記載されています。

高度なモジュールバンドラの使用方法

WebpackとParcelは、scssファイルからインポートする際、scssモジュールにチルダパス（~）をプリペンドすることをサポートしています。

// Webpack example
@import '~bootstrap';
@import '~bootstrap-vue';

// Parcel example
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-vue/src/index.scss';

アセットの読み込み方法とモジュールの解決方法の詳細については、モジュールバンドラのドキュメントを参照してください。

備考:

CSSファイルの読み込みに関するWebpack設定（公式ガイド）
SASS/SCSSファイル用のWebpack Loader（公式ガイド）
Parcel CSS（公式ガイド）
Parcel SCSS（公式ガイド）

モジュールバンドラによるツリーシェイキング

モジュールバンドラを使用すると、特定のコンポーネントグループ（プラグイン）、コンポーネント、および/またはディレクティブのみをインポートできます。ツリーシェイキングはJavaScriptコードのみに適用され、CSS/SCSSには適用されないことに注意してください。

注記: 最適なツリーシェイキングは、webpack 4がproductionモードで動作し、JavaScriptのミニファイが有効になっている場合にのみ機能します。

Vueプラグインとしてのコンポーネントグループとディレクティブ

bootstrap-vueからインポートすることにより、コンポーネントグループとディレクティブをVueプラグインとしてインポートできます。

// This imports all the layout components such as <b-container>, <b-row>, <b-col>:
import { LayoutPlugin } from 'bootstrap-vue'
Vue.use(LayoutPlugin)

// This imports <b-modal> as well as the v-b-modal directive as a plugin:
import { ModalPlugin } from 'bootstrap-vue'
Vue.use(ModalPlugin)

// This imports <b-card> along with all the <b-card-*> sub-components as a plugin:
import { CardPlugin } from 'bootstrap-vue'
Vue.use(CardPlugin)

// This imports directive v-b-scrollspy as a plugin:
import { VBScrollspyPlugin } from 'bootstrap-vue'
Vue.use(VBScrollspyPlugin)

// This imports the dropdown and table plugins
import { DropdownPlugin, TablePlugin } from 'bootstrap-vue'
Vue.use(DropdownPlugin)
Vue.use(TablePlugin)

プラグインとしてインポートする場合、ほとんどの場合、すべてのサブコンポーネントと関連するディレクティブがインポートされます。つまり、<b-nav>をインポートすると、すべての<nav-*>サブコンポーネントとすべてのドロップダウンサブコンポーネントも含まれます。コンポーネントの省略形エイリアス（存在する場合）もプラグインに含まれます。詳細については、コンポーネントとディレクティブのドキュメントを参照してください。

ModalPluginまたはToastPluginプラグインを使用していない場合に$bvModalと$bvToastのインジェクションを提供するための、'bootstrap-vue'からインポートできる2つの追加ヘルパープラグインがあります。

BVModalPlugin - メッセージボックスを生成するための$bvModalインジェクションを提供します。
BVToastPlugin - オンデマンドトーストを生成するための$bvToastインジェクションを提供します。

複数のコンポーネントグループおよび/またはディレクティブグループプラグインをインポートする場合は、最適なツリーシェイキングのために、すべてのインポートを1つのimportステートメントに含めてください。

個々のコンポーネントとディレクティブ

特定のコンポーネントまたはコンポーネントセットのみを取り込みたい場合は、それらのコンポーネントを直接インポートできます。

コンポーネント/ディレクティブを選択するには、まず使用しているファイルにインポートします。

// Place all imports from 'bootstrap-vue' in a single import
// statement for optimal bundle sizes
import { BModal, VBModal } from 'bootstrap-vue'

次に、コンポーネント定義に追加します。

Vue.component('MyComponent', {
  components: { BModal },
  // Note that Vue automatically prefixes directive names with `v-`
  directives: { 'b-modal': VBModal }
  // ...
})

または、グローバルに登録します。

Vue.component('BModal', BModal)
// Note that Vue automatically prefixes directive names with `v-`
Vue.directive('b-modal', VBModal)

Vueでは、さまざまなコンポーネント名とディレクティブ名の構文が使用できます。そのため、kebab-casing（表示されている）、camelCasing、PascalCasing、および/またはオブジェクトプロパティの省略記法（コンポーネントのみ）を自由に使用できます。

より小さなバンドルのためのBootstrapVueソースコードの使用

モジュールバンドラを使用する場合、通常はサポートされているブラウザ用にBabelによって事前にトランスパイルされたesm/モジュールビルドがデフォルトで使用されます。

モジュールバンドラの構成で'bootstrap-vue'をエイリアス化してBootstrapVueソースファイルを使用し、ビルドプロセスによるトランスパイルのためにnode_modules/bootstrap-vue/src/*をホワイトリストに追加することにより、esm/ビルドの使用をオーバーライドできます。これにより、ターゲットブラウザ/環境に対してBootstrapVueをトランスパイルし、バンドルサイズを削減できます（Babelヘルパーユーティリティは一度だけ含まれます）。ただし、ビルド時間が若干長くなる可能性があります。

Babelトランスパイルのためのexample webpack.config.js

module.exports = {
  resolve: {
    alias: {
      // Alias for using source of BootstrapVue
      'bootstrap-vue$': 'bootstrap-vue/src/index.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        // Exclude transpiling `node_modules`, except `bootstrap-vue/src`
        exclude: /node_modules\/(?!bootstrap-vue\/src\/)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  }
}

babel-core、babel-loader、およびbabel-preset-envをインストールする必要がある場合があります。

# If using npm
npm install babel-core babel-loader babel-preset-env --save-dev

# If using yarn
yarn add babel-core babel-loader babel-preset-env --dev

詳細については、以下を参照してください。

Nuxt.jsモジュール

BootstrapVueは、BootstrapVue（またはBootstrapVueの一部）をNuxt.jsアプリに簡単にインポートするためのNuxt.jsモジュールを提供します。

Nuxt.jsの開始方法

Nuxt.jsバージョン2.15.8以降が推奨されます。

依存関係のインストール

# With npm
npm install bootstrap-vue

# With yarn
yarn add bootstrap-vue

**nuxt.config.js**ファイルのmodulesセクションにbootstrap-vue/nuxtを追加します。

これにより、bootstrap.cssとbootstrap-vue.cssのデフォルトで事前にコンパイルされたCSSの両方が含まれます。

module.exports = {
  modules: ['bootstrap-vue/nuxt']
}

これは、アイコンコンポーネントをインストールしません。Nuxt.jsモジュールを使用してアイコンを含める方法については、以下のアイコンセクションを参照してください。

カスタムBootstrap SCSSの使用

カスタムBootstrap SCSSを使用している場合、以下のオプションをfalseに設定することにより、BootstrapとBootstrapVueの事前にコンパイルされたCSSファイルの自動インクルードを無効にできます。

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    bootstrapCSS: false, // Or `css: false`
    bootstrapVueCSS: false // Or `bvCSS: false`
  }
}

BootstrapVueのカスタムSCSSは、Bootstrap SCSS変数とmixin、および設定されている変数のオーバーライドに依存します。プロジェクトのカスタムSCSSファイルにBootstrapとBootstrapVueのSCSSを含めることができます。

// Custom Bootstrap variable overrides go first
$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 640px,
  lg: 992px,
  xl: 1300px
);
$enable-rounded: false;

// Then include the following
@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';

// And define any of your custom or additional CSS/SCSS here,
// or via an @import

アプリのメインエントリポイントで、カスタムSCSSファイルを1つだけ含めます（sass-loaderを使用する場合）。

import 'custom.scss'

`transformAssetUrls`とNuxt.js

BootstrapVue Nuxtプラグインモジュールは、BootstrapVue固有のtransformAssetUrls画像srcプロップ構成を自動的に追加します。

Nuxt.jsによるツリーシェイキング

使用可能なBootstrapVueプラグインのサブセットのみを使用するため、本番環境のバンドルサイズを縮小したい場合は、Nuxt.jsプロジェクトでグローバルにインストールするBootstrapVuecomponentPluginsまたはdirectivePluginsのリストを構成できます。ツリーシェイキングはJavaScriptコードのみに適用され、CSS/SCSSには適用されないことに注意してください。

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    componentPlugins: [
      'LayoutPlugin',
      'FormPlugin',
      'FormCheckboxPlugin',
      'FormInputPlugin',
      'FormRadioPlugin',
      'ToastPlugin',
      'ModalPlugin'
    ],
    directivePlugins: ['VBPopoverPlugin', 'VBTooltipPlugin', 'VBScrollspyPlugin']
  }
}

ModalPluginまたはToastPluginプラグインを使用していない場合に$bvModalと$bvToastのインジェクションを提供するための、componentPluginsオプションで使用できる2つの追加ヘルパープラグインがあります。

BVModalPlugin - メッセージボックスを生成するための$bvModalインジェクションを提供します。
BVToastPlugin - オンデマンドトーストを生成するための$bvToastインジェクションを提供します。

Nuxt.jsプロジェクトでグローバルにインストールするBootstrapVuecomponentsまたはdirectivesのリストを構成することにより、個々のコンポーネントおよび/またはディレクティブをオプションでインポートすることもできます。

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    components: ['BContainer', 'BRow', 'BCol', 'BFormInput', 'BButton', 'BTable', 'BModal'],
    directives: ['VBModal', 'VBPopover', 'VBTooltip', 'VBScrollspy']
  }
}

プラグインのインポートと個々のコンポーネントおよびディレクティブのインポートを自由に組み合わせることができます。

使用可能なプラグイン名（および各プラグインに含まれるコンポーネントとディレクティブ）、およびコンポーネントおよび/またはディレクティブのインポート名については、各コンポーネントとディレクティブドキュメントの下部にある参照セクションを参照してください。

個々のコンポーネントをインポートする場合、コンポーネントエイリアスは使用できなくなります。

注記: 最適なツリーシェイキングは、Nuxt.jsアプリがproductionモードの場合にのみ機能します。productionモードでない場合（つまりdevモード）、バンドルサイズが大きくなる場合があります。

Nuxtアプリの特定のページおよび/またはコンポーネントに個々のBootstrapVueコンポーネントをインポートする場合は、Nuxt.jsモジュールをバイパスし、代わりに上記のモジュールバンドラとモジュールバンドラによるツリーシェイキングのセクションに従うことができます。または、Nuxt.jsモジュール構成でいくつかのプラグイン（LayoutPluginなど）をインポートし、必要に応じてページに追加のコンポーネントまたはプラグインをインポートすることもできます。

アイコン

Nuxt.jsモジュールを使用する場合、アイコンプラグインは自動的にインストールされません。IconsPluginを明示的に有効にするか、インポートするアイコンコンポーネントを指定する必要があります。

すべてのアイコン

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    // Install the `IconsPlugin` plugin (in addition to `BootstrapVue` plugin)
    icons: true
  }
}

特定のアイコン

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    // Add the desired icon components to the `components` array
    components: ['BIcon', 'BIconAlertFill', 'BIconCalendar', 'BIconGears']
  }
}

アイコンプラグイン

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    // Add the icon plugin to the `componentsPlugins` array
    componentPlugins: ['IconsPlugin']
  }
}

Nuxt.jsによるカスタムBootstrapVue設定の受け渡し

カスタムBootstrapVue設定を渡す必要がある場合は、nuxt.config.jsでconfigプロパティを設定できます。

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    config: {
      // Custom config options here
    }
  }
}

Nuxt.js用のBootstrapVueの事前トランスパイル版の使用

Nuxt.jsモジュールは、より高速な開発ビルドのためにBootstrapVueの事前トランスパイル版を使用し、より高品質で小さな本番ビルドのためにBootstrapVueのソース（src/）を使用します。

usePretranspiledオプションを使用してこのオプションをオーバーライドできます。trueに設定すると、常に事前トランスパイル版が使用され、falseに設定すると、常にsrc/が使用されます。デフォルトでは、usePretranspiledは開発モードでのみ有効になっています。デフォルト設定はパフォーマンスに最適であるため、このオプションを使用する必要はありません。

Vue CLI 3

V2とは異なり、Vue CLI 3はテンプレートを使用しません。

my-projectディレクトリに新しいプロジェクトを作成します。

npx @vue/cli create my-project

my-projectディレクトリに入り、bootstrap-vueをインストールします。

npm install bootstrap-vue

Vue CLIは内部的にwebpackを使用しているため、Webpackの説明に従ってBootstrapVueプラグインを登録できます。

import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

さまざまなBootstrapVueコンポーネントの画像srcプロップにプロジェクト相対パスを使用するためのVue CLI 3の追加設定については、画像Src解決参照ページのVue CLI 3セクションを参照してください。

Vue CLI 3プラグイン

代わりに、Bootstrap-Vue Vue CLI 3プラグインを使用してアプリを構成することができます。

vue create my-app
cd my-app
vue add bootstrap-vue

これにより、プロジェクトの開始に必要な基本的なBootstrapVue設定を備えた新しいアプリが作成されます。

今後、このプラグインは、より高度な構成とテンプレートのオプションを提供する予定です。

アイコンのサポートには、生成された設定ファイルの編集が必要になる場合があります。

ブラウザ

モジュールバンドラーまたはコンパイルプロセスを使用していない場合は、代わりにHTMLの`<head>` セクションにBootstrapとBootstrapVueのCSS URLを追加し、その後で必要なJavaScriptファイルを追加できます。

古いブラウザをサポートする場合（下記のブラウザサポートを参照）は、VueとBootstrapVueのJavaScriptファイルをロードする前に、最新のJavaScript機能を処理するためのポリフィルを含める必要があります。

<!-- Add this to <head> -->

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

ビルドバリアント

ビルド環境/パッケージャーに最適なバリアントを選択すると、バンドルサイズを削減できます。バンドラーがesmモジュールをサポートしている場合、commonjsよりも自動的に優先されます。

バリアント	環境	ツリーシェイク	パッケージパス
ESMモジュール	webpack 2+ / rollup.js	はい	`esm/index.js`
ESMバンドル	webpack 2+ / rollup.js	はい	`dist/bootstrap-vue.esm.js`
commonjs2	webpack 1 / ...	いいえ	`dist/bootstrap-vue.common.js` または `dist/bootstrap-vue.common.min.js`
UMD	ブラウザ	いいえ	`dist/bootstrap-vue.js` または `dist/bootstrap-vue.min.js`

UMD（ブラウザ）バリアントには、BootstrapVueのアイコンサポートが含まれていません。上記の他のすべてのバリアントには、BootstrapVueIcons（IconsPlugin）プラグインが含まれています（アイコンプラグインは自動的にインストールされず、Vue.use()を使用して明示的にインストールする必要があります。詳細については、アイコンの使用セクションを参照してください）。

アイコンのみのモジュール

バリアント	環境	ツリーシェイク	パッケージパス
ESMバンドル	webpack 2+ / rollup.js	はい	`dist/bootstrap-vue-icons.esm.js`
commonjs2	webpack 1 / ...	いいえ	`dist/bootstrap-vue-icons.common.js` または `dist/bootstrap-vue-icons.common.min.js`
UMD	ブラウザ	いいえ	`dist/bootstrap-vue-icons.js` または `dist/bootstrap-vue-icons.min.js`

ESMモジュールビルドとESMバンドル（単一ファイル）はツリーシェイク可能ですが、ESMバンドルよりもESMモジュールを使用すると、最終的なバンドルサイズが小さくなります。

上記のすべてのビルドバリアントは、BootstrapVueでサポートされているブラウザを対象として事前にトランスパイルされています。ただし、最新のブラウザのみを対象とする場合は、src/index.jsからBootstrapVueをインポートし（bootstrap-vueをbootstrap-vue/src/index.jsにエイリアス化して）、独自のプロジェクトを介してトランスパイルのためにbootstrap-vue/srcをホワイトリストに登録することを検討してください。これにより、最終的なプロジェクトのバンドルサイズを削減できる可能性があります。詳細については、上記のバンドルサイズを小さくするためのBootstrapVueソースコードの使用セクションを参照してください。

依存関係

BootstrapVueはPopper.js（ツールチップ、ポップオーバー、ドロップダウンの位置合わせ用）、PortalVue（トースト用）、およびvue-functional-data-merge（機能コンポーネントで使用）に依存しています。これらの3つの依存関係はBootstrapVue UMDバンドルに含まれていますが、UMD（ブラウザ）アイコンのみのバンドルにはvue-functional-data-mergeが含まれています。他のすべてのビルドにはこれらの依存関係は含まれていません。

Bootstrapを使用しているプロジェクトの移行

既にBootstrap v4を使用している場合は、プロジェクトに対していくつかの調整が必要になる場合があります。

ページスクリプトまたはビルドパイプラインからbootstrap.jsファイルを削除します。
BootstrapだけがjQueryに依存している場合、安全に削除できます—BootstrapVueはjQueryに依存しません。
ネイティブのBootstrap HTMLマークアップを、簡素化されたBootstrapVueカスタムコンポーネントマークアップに変換します。
最初に、BootstrapのJavaScriptを必要とするインタラクティブなコントロールの変換から始めます。

ブラウザサポート

CSS

BootstrapVueはBootstrap v4.6 CSS/SCSSで使用してください。現在Bootstrap v4でサポートされているブラウザの詳細については、ブラウザとデバイスを参照してください。

JS

BootstrapVueはVue.jsで記述されています！そのため、サポートされるブラウザはプロジェクトとバンドラーによって異なります。

BootstrapVueで使用されている機能とAPIは以下のとおりです。

ES6（例：Array.from()、Array.isArray()、Object.assign()、Object.is()など）
Promise
MutationObserver
IntersectionObserver（オプション）

古いIE、Android、iOSデバイスのウェブブラウザをサポートしたい場合は、core-jsとintersection-observerを使用することを検討してください。

npm install core-js regenerator-runtime intersection-observer

次に、アプリのメインエントリポイントでポリフィルをインポートします。

import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'intersection-observer' // Optional
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

非推奨の@babel/polyfillを使用している場合

npm install @babel/polyfill intersection-observer