Hướng dẫn cài và sử dụng vue-multiselect cho nuxt js

vue-multiselect là một thư viện component cho Vue.js, giúp tạo các dropdown (select box) tùy chỉnh với khả năng chọn nhiều giá trị (multi-select) và hỗ trợ tìm kiếm (searchable). Nó cung cấp một giao diện đẹp và dễ sử dụng để người dùng có thể chọn các mục từ một danh sách, đồng thời hỗ trợ các tính năng mạnh mẽ như tìm kiếm, nhóm mục, chọn nhiều mục, và tùy chỉnh giao diện.

Các tính năng chính của vue-multiselect:

1. Chọn nhiều mục: Hỗ trợ chọn nhiều giá trị cùng lúc.
2. Tìm kiếm: Cho phép người dùng tìm kiếm trong danh sách các mục.
3. Tùy chỉnh giao diện: Bạn có thể tùy chỉnh giao diện theo ý muốn (như cách hiển thị mục, kiểu hiển thị của dropdown, v.v.).
4. Hỗ trợ nhóm mục: Có thể nhóm các mục trong dropdown theo các danh mục khác nhau.
5. Dễ sử dụng: Cấu hình đơn giản và dễ dàng tích hợp vào ứng dụng Vue.js hoặc Nuxt.js.

Bước 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

Bước 2: Cài Đặt Thư Viện vue-multiselect

Mở terminal và chạy lệnh sau để cài đặt vue-multiselect:

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

yarn add vue-multiselect

còn đối với npm thì dùng lệnh sau:

npm i vue-multiselect

Bước 3: Tạo plugin cho vue-multiselect

Để sử dụng cho vue-multiselect trong dự án Nuxt.js, bạn có thể tạo một plugin. Tạo một tệp mới trong thư mục plugins, ví dụ vue-multiselect.js: 

import Vue from 'vue';
import Multiselect from 'vue-multiselect';
import 'vue-multiselect/dist/vue-multiselect.min.css';

Vue.component('vue-multiselect', Multiselect);

Bước 4: Đăng ký plugin trong nuxt.config.js

Mở tệp nuxt.config.js và thêm plugin mà bạn vừa tạo vào phần plugins:

export default {
  // ...
  plugins: [
    { src: '~/plugins/vue-multiselect.js', ssr: false } // ssr: false nếu bạn chỉ muốn dùng trên client
  ],
  // ...
}

Bước 5: Tạo component cho vue-multiselect

Chúng ta sẽ tạo component cho vue-multiselect bằng cách tạo file MultiselectComponent.vue: 

<template>
  <div>
    <multiselect
      v-model="selected"
      :options="options"
      :multiple="true"
      :searchable="true"
      :close-on-select="false"
      :track-by="'code'"
      placeholder="Chọn các mục"
      label="name"
    ></multiselect>
    <p>Giá trị đã chọn: {{ selected }}</p>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  components: {
    Multiselect
  },
  data() {
    return {
      selected: [],
      options: [
        { name: 'Apple', code: 'apple' },
        { name: 'Banana', code: 'banana' },
        { name: 'Orange', code: 'orange' },
        { name: 'Grapes', code: 'grapes' }
      ]
    }
  }
}
</script>

Bước 6: Gọi ra và sử dụng

Giả sử bạn có một component cha gọi là App.vue. Bạn có thể gọi component vue-multiselect như sau:

<template>
  <div>
    <h1>Vue Multiselect trong Nuxt.js</h1>
    <MultiselectComponent />
  </div>
</template>

<script>
import MultiselectComponent from '~/components/MultiselectComponent.vue'

export default {
  components: {
    MultiselectComponent
  }
}
</script>

Bước 7: Chạy project của bạn

Cuối cùng, bạn có thể chạy project Nuxt.js của mình bằng lệnh:

npm run dev

hoặc

yarn dev

Kết luận

Giờ đây bạn đã cài đặt thành công vue-multiselect trong dự án Nuxt.js và có thể sử dụng component này để tạo các dropdown chọn nhiều lựa chọn với giao diện đẹp. Bạn có thể tùy chỉnh thêm các thuộc tính của vue-multiselect để phù hợp với yêu cầu của mình.