スターターテンプレート

基本的なクライアントサイドHTMLからビルドシステムとコンパイラを使用する方法まで、アプリを作成するにはいくつかの方法があります。

いずれの場合も、Vueの使用に精通している必要があります。Vueチュートリアルの優れたリソースは、Laracastsです。

基本的な例

標準の<script>タグと<link>タグを使用して、必要なJavaScriptとCSSをページにロードすることにより、ビルドシステムを必要とせずにすばやく開始できます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <title>My first BootstrapVue app</title>

    <!-- Required Stylesheets -->
    <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.css"
    />

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

    <!-- Required scripts -->
    <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
  </head>
  <body>
    <!-- Our application root element -->
    <div id="app">
      <b-container>
        <b-jumbotron header="BootstrapVue" lead="Bootstrap v4 Components for Vue.js 2">
          <p>For more information visit our website</p>
          <b-btn variant="primary" href="https://bootstrap-vue.dokyumento.jp/">More Info</b-btn>
        </b-jumbotron>

        <b-form-group
          horizontal
          :label-cols="4"
          description="Let us know your name."
          label="Enter your name"
        >
          <b-form-input v-model.trim="name"></b-form-input>
        </b-form-group>

        <b-alert variant="success" :show="showAlert">Hello {{ name }}</b-alert>
      </b-container>
    </div>

    <!-- Start running your app -->
    <script>
      window.app = new Vue({
        el: '#app',
        data: {
          name: ''
        },
        computed: {
          showAlert() {
            return this.name.length > 4 ? true : false
          }
        }
      })
    </script>
  </body>
</html>

Vue CLI 3

Vue CLI 3は、Vueアプリを作成する最新の手段です。

Vue CLI 3 BootStrapVueプラグインを使用して、基本的なアプリを設定できます。詳細については、はじめにドキュメントページを参照してください。

カスタマイズされたBootstrap v4 CSSを使用した構築

ビルドシステムを使用していて、Bootstrap v4 CSSをカスタマイズする場合、以下のリファレンスが便利な出発点となります。

BootstrapVueのテーマ設定リファレンスセクション
公式Bootstrap Bootstrapのテーマ設定ガイド

個々のコンポーネントのインポート

個々のコンポーネントとディレクティブをインポートするために使用できる方法はいくつかあります。

内部的に単一ファイルの.vueコンポーネントであるコンポーネントのコンパイルを処理するために、vue-loaderを設定する必要があります。

BootstrapVueディストリビューションには、すべてのコンポーネントとディレクティブ用のESモジュールが含まれるようになりました。NPMバンドルを使用する場合、これらはbootstrap-vue/es/components/ディレクトリとbootstrap-vue/es/directives/ディレクトリにあります。BootstrapVueリポジトリソースからビルドする場合、yarn buildを実行するとディレクトリが作成されます。

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

例として、<b-card>(とそのサブコンポーネントの一部)と<b-table>を次のようにインポートできます。

// Import the individual components
import { BCard, BCardBody, BCardFooter, BCardHeader, BCardImg, BTable } from 'bootstrap-vue'

// Add components globally
Vue.component('BCard', BCard)
Vue.component('BCardBody', BCardBody)
Vue.component('BCardFooter', BCardFooter)
Vue.component('BCardHeader', BCardHeader)
Vue.component('BCardImg', BCardImg)
Vue.component('BTable', BTable)

// Or make available locally to your component or app
export default {
  components: {
    BCard,
    BCardBody,
    BCardFooter,
    BCardHeader,
    BCardImg,
    BTable
  }
  // ...
}

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

コンポーネントグループまたはディレクティブは、コンポーネントグループまたはディレクティブディレクトリをインポートすることにより、Vueプラグインとしてインポートできます。<b-card>(および関連するサブコンポーネント)と<b-table>のインポートは、次の方法で行うことができます。

// Import the components as Vue plugins
import { CardPlugin, TablePlugin } from 'bootstrap-vue'

// Add the plugins to Vue
Vue.use(CardPlugin)
Vue.use(TablePlugin)

これで、プロジェクトテンプレートで<b-card>(<b-card-*>サブコンポーネントを含む)と<b-table>コンポーネントを使用できます。

一部のコンポーネントプラグインは、他のディレクティブとコンポーネントを自動的にインポートすることに注意してください(つまり、modalプラグインはv-b-modalディレクティブもインポートし、navプラグインはすべてのnav-*サブコンポーネントとドロップダウンサブコンポーネントを自動的にインポートします)。詳細については、各ドキュメントページの下部にあるコンポーネントリファレンスまたはディレクティブリファレンスを参照してください。