Hướng dẫn cài đặt và sử dụng Buefy - thư viện UI nhẹ dành cho Vue.js

Tại sao chọn Buefy?

1. Dựa trên Bulma CSS
   Bulma là một framework CSS thuần túy, nhẹ, không cần JavaScript, giúp tối ưu hiệu suất và dễ tùy chỉnh.

2. Tích hợp Vue.js mạnh mẽ
   Buefy tận dụng tối đa khả năng của Vue.js để cung cấp các thành phần động như Modal, Toast, Table, v.v.

3. Nhẹ và linh hoạt
   Dễ tích hợp vào bất kỳ dự án nào mà không làm tăng đáng kể kích thước ứng dụng.

4. Cộng đồng hỗ trợ tốt
   Có tài liệu chi tiết và được cộng đồng hỗ trợ tích cực.

Cài đặt và sử dụng PrimeVue

1. Tạo Dự Án Nuxt.js Mới

                 Nếu bạn chưa có dự án Nuxt.js, bạn có thể tạo một dự án mới :

Chú ý: Có 2 cách để tạo dự án Nuxtjs đó là:

• npm
• yarn

Đối với yarn chạy lệnh sau :

yarn create nuxt-app <project-name>

Còn đối với npm thì  tạo dự án bằng cách sử dụng npx:

npx create-nuxt-app servbay-nuxt-app

2. Cài đặt Buefy

Chạy lệnh sau trong thư mục dự án Nuxt.js:

npm install buefy bulma

3. Tích hợp Buefy vào dự án

Tạo một plugin Buefy

Tạo file buefy.js trong thư mục plugins:

File: plugins/buefy.js

import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';

Vue.use(Buefy);

Thêm plugin vào nuxt.config.js

Khai báo plugin trong cấu hình Nuxt.js:

File: nuxt.config.js

export default {
  plugins: ['~/plugins/buefy.js'],
  css: ['bulma/css/bulma.css'], // Thêm Bulma vào file CSS toàn cục
};

Sử dụng các thành phần Buefy

Sau khi tích hợp, bạn có thể sử dụng các thành phần của Buefy trong các file Vue.

Ví dụ 1: Sử dụng Button

<template>
  <div>
    <b-button type="is-primary" @click="onClick">Click Me</b-button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      alert('Button clicked!');
    },
  },
};
</script>

Ví dụ 2: Sử dụng Modal

<template>
  <div>
    <b-button @click="isModalActive = true">Open Modal</b-button>
    <b-modal :active.sync="isModalActive" :width="640" has-modal-card>
      <div class="box">
        <p>Welcome to Buefy Modal!</p>
      </div>
    </b-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isModalActive: false,
    };
  },
};
</script>

Ví dụ 3: Toast thông báo

<template>
  <b-button @click="showToast">Show Toast</b-button>
</template>

<script>
export default {
  methods: {
    showToast() {
      this.$buefy.toast.open({
        message: 'This is a notification!',
        type: 'is-success',
      });
    },
  },
};
</script>

Tùy chỉnh giao diện Buefy

Bạn có thể tùy chỉnh các biến của Bulma trong file SCSS của dự án để thay đổi màu sắc, font chữ, kích thước, v.v.

Thêm SCSS vào Nuxt.js

1. Cài đặt SCSS loader:

   npm install sass sass-loader --save-dev

2. Tạo file SCSS tùy chỉnh, ví dụ: assets/scss/custom.scss:

   File: assets/scss/custom.scss

   $primary: #ff3860; /* Thay đổi màu chính */ @import "~bulma/bulma";

3. Cập nhật nuxt.config.js để sử dụng file SCSS này:

   export default { css: ['~/assets/scss/custom.scss'], };

Khởi chạy dự án

Chạy lệnh sau để khởi động ứng dụng:

npm run dev