Hướng dẫn cài đặt và sử dụng thư viện Elementjs nuxtjs

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

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 Element Plus

Đầu tiên, bạn cần cài đặt thư viện Element Plus và các gói liên quan.

Mở terminal và chạy lệnh:

npm install element-plus

Hoặc sử dụng yarn:

yarn add element-plus

Nếu bạn muốn tích hợp Element Plus Icons, cài đặt thêm:

npm install @element-plus/icons-vue

3. Cấu hình Element Plus trong dự án Nuxt.js

Tự động import Element Plus

1. Cài đặt plugin unplugin-element-plus:

   npm install -D unplugin-element-plus

2. Mở file nuxt.config.ts và thêm plugin:

   import ElementPlus from 'unplugin-element-plus/vite';
   
   export default defineNuxtConfig({
     modules: [],
     vite: {
       plugins: [
         ElementPlus({ /* Tùy chỉnh nếu cần */ })
       ]
     }
   });
   

Sử dụng thủ công Element Plus

Nếu không muốn dùng plugin, bạn có thể import Element Plus thủ công:

1. Tạo file plugin tại plugins/element-plus.ts:

   import { defineNuxtPlugin } from '#app';
   import ElementPlus from 'element-plus';
   import 'element-plus/dist/index.css';
   
   export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.use(ElementPlus);
   });
   

2. Sau đó, Nuxt.js sẽ tự động load plugin này.

4. Sử dụng Element Plus trong component

Bây giờ bạn có thể sử dụng các component của Element Plus trong dự án.

Ví dụ:

<template>
  <div>
    <el-button type="primary">Primary Button</el-button>
    <el-date-picker v-model="date" type="date" placeholder="Select Date"></el-date-picker>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(null);
</script>

5. Tùy chỉnh theme

Element Plus cho phép bạn tùy chỉnh giao diện bằng cách sử dụng CSS biến (CSS Variables).

1. Tạo file assets/styles/element-plus.scss:

:root {
  --el-color-primary: #42b983; // Màu chủ đạo
  --el-font-size-base: 16px;  // Kích thước font
}

       2.Import file này vào nuxt.config.ts:

export default defineNuxtConfig({
  css: ['@/assets/styles/element-plus.scss']
});

6. Cài đặt và sử dụng icon

Khi sử dụng @element-plus/icons-vue, bạn cần import icon tương ứng:

Ví dụ:

<template>
  <div>
    <el-icon><Edit /></el-icon>
    <el-button icon="Edit">Edit</el-button>
  </div>
</template>

<script setup>
import { Edit } from '@element-plus/icons-vue';
</script>

7. Một số lưu ý khi sử dụng với Nuxt.js

• Element Plus hoạt động tốt với Nuxt 3 nhờ hỗ trợ Vue 3. Hãy đảm bảo bạn đang sử dụng phiên bản mới nhất của Nuxt.
• Khi cần render phía server (SSR), Element Plus hoạt động ổn định, nhưng nên kiểm tra kỹ nếu có lỗi liên quan đến Hydration.