Cách thêm Bootstrap trong app Vue.js

Vue.js và Bootstrap đều là hai framework nổi tiếng trong thế giới lập trình. Bạn có thể kết hợp Bootstrap và Vue.js theo phương thức dưới đây.

Điều kiện cần thiết:

• Có kiến thức cơ bản về HTML, JavaScript và Bootstrap.
• Cài đặt node.js.

Tạo dự án Vue.js

Để tạo ứng dụng Vue.js, hãy dùng lệnh sau trong terminal.

vue create bootstrapinvue

Mở dự án trong Visual Studio Code.

Giờ cài đặt Bootstrap trong dự án này.

npm install bootstrap
npm install bootstrap-vue

Sau đó, mở file main.js bằng trình chỉnh sửa code của bạn. Nhập Bootstrap.

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

Đây là code file main.js.

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
createApp(App).mount('#app')

Mở thành phần HelloWorld.vue và thêm code sau:

<template>
  <div class="container">
     <button type="button" class="btn btn-success">Success</button>
     <button type="button" class="btn btn-info">Info</button>
     <button type="button" class="btn btn-warning">Warning</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>
<style scoped>
</style>

Giờ chạy dự án. Dùng lệnh sau để chạy dự án này.

npm run serve

Thêm Bootstrap Modal đơn giản trong Vue

Triển khai một modal Bootstrap đơn giản trong Vue không quá khó. Đơn giản nhất là bạn chỉ cần thêm thuộc tính b-modal kèm nút bấm này. Chuyển ID tới nút bấm tương ứng với Bootstrap modal, và thêm thuộc tính tiêu đề hiện tên cơ bản của phương thức đó.

<template>
  <div class="container mt-5">
    <div>
      <b-button v-b-modal.modal-1>Show Modal</b-button>
      <b-modal id="modal-1" title="Vue Js Bootstrap Modal Example">
        <p class="my-4">Content goes here...</p>
      </b-modal>
    </div>    
  </div>
</template>
<script>
  export default {
    data() {
      return {
      }
    }
  }
</script>

Căn chỉnh modal theo chiều dọc

Bạn có thể căn chỉnh modal theo chiều dọc trong cổng xem và không cần thêm code. Phần hỗ trợ ở giữa cần được đồng hóa theo công thức b-modal để hoàn thành nhiệm vụ này.

<template>
  <div class="container mt-5">
    <div>
      <b-button v-b-modal.modal-center>Show Centered Modal</b-button>
      <b-modal id="modal-center" centered title="Vue Bootstrap Centered Modal Example">
        <p class="my-4">Content goes here...</p>
      </b-modal>
    </div>    
  </div>
</template>
<script>
  export default {
    data() {
      return {
      }
    }
  }
</script>

Trên đây là cách đơn giản nhất để thêm Bootstrap vào Vue.js. Hi vọng bài viết hữu ích với các bạn.