なるはや Vue SPA入門：Bootstrap

Vue CLI3 で作成した SPA（Single Page Application）プロジェクト上で、段階的に Vue.js を学んで行きましょう。

目次はこちら

今回は Bootstrap 編です。

前提事項

Vue.js devtools 編 が完了していること。

Bootstrap

コンポーネント編で作成した TODO リストに、CSS のフレームワークである Boostrap を適用してデザインを変更してみます。

まずは bootstrap 関連のコンポーネントを追加します。

yarn add bootstrap jquery popper.js

main.js で bootstrap を import します。

main.js

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

TodoInputText.vue の input タグを以下のように修正します。

TodoInputText.vue

<template>
  <!-- class の指定を追加 -->
  <input
    type="text"
    class="form-control"
    v-model="value"
    @change="onChange($event.target.value)"
    placeholder="Add Todo"
  >
</template>

TodoListItem.vue の button タグを以下のように修正します。

<template>
  <li>
    {{ todo.text }}
    <!-- class の指定を追加 -->
    <button
      class="btn btn-light btn-sm"
      @click="$emit('remove', todo.id)"
    >x</button>
  </li>
</template>

以下のようにボタンとテキスト入力項目のデザインが変わりました。

次回

Vuex