Naive Ui - Thư viện component "pro" cho vue 3, nuxt 3
Xin chào các bạn, hôm nay mình sẽ giới thiệu với các bạn một thư viện component cực kỳ "chất" nhưng ít người biết đến dành cho vue 3 và đặc biệt nó còn hỗ trợ SSR rất tốt nên có thể là một phương án tuyệt vời cho các ứng dụng nuxt 3 nữa nhé. Mình tìm được bộ thư viện này là do trong quá trình xây dựng app bằng nuxt 3 và khi đó dùng thư viện element ui plus chưa hỗ trợ tốt cho việc Server-side rendering, dạo quanh một vòng trên google thì tìm được em này rất ưng ý. Và thật sự đối với mình thì bộ thư viện này có khi còn ngon hơn cả element ui nữa, mỗi tội có một vài lỗi nho nhỏ với cách viết hơi khó hơn element ui một chút. Không dài dòng nữa cùng tìm hiểu về bộ thư viện naive ui này thôi.
Kiến thức cần biết
Nói là kiến thức cần biết thì nghe hơi "nguy hiểm" chứ thực ra không biết thì vẫn làm được, biết thêm thì anh chị em code nhàn hơn thôi. Vì bộ thư viện này được xây dựng cho vue 3 nên để làm việc tốt với vue 3 thì nên có kiến thức về các phần sau:
- TypeScript - cái này thì chắc chắn là phải có rồi
- Composition API, Options API của Vue 3
- h() function (hyperscript - sử dụng để tạo ra mã html, anh em có thể xem thêm ở đây https://vuejs.org/guide/extras/render-function.html)
Cài đặt
Để cài package naive ui thì chỉ cần chạy lệnh rất đơn giản thôi:
//yarn
yarn add -D naive-ui
//npm
npm i -D naive-ui
Hoặc có thể cài đặt bằng UMD như sau:
<html>
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/vue"></script>
<!-- Would use latest version, you'd better specify a version -->
<script src="https://unpkg.com/naive-ui"></script>
</head>
<body>
<div id="app">
<n-button>{{ message }}</n-button>
</div>
<script>
const App = {
setup() {
return {
message: 'naive'
}
}
}
const app = Vue.createApp(App)
app.use(naive)
app.mount('#app')
</script>
</body>
</html>
Sau khi cài đặt xong thì mình import vào dự án giống như các thư viện component khác. Có 2 cách import là import trong component và import toàn bộ dự án:
- Import trong component:
<template>
<n-button>naive-ui</n-button>
</template>
<script setup>
import { NButton } from 'naive-ui'
</script>
- Import toàn bộ dự án:
//trong app.vue
import { createApp } from 'vue'
import naive from 'naive-ui'
const app = createApp(App)
app.use(naive)
//hoặc tạo một plugins riêng để import trong nuxt 3
import { defineNuxtPlugin } from '#app'
import {
create,
NButton,
NForm,
...
} from 'naive-ui'
const naive = create({
components: [
NButton,
NForm,
...
],
})
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(naive)
}
// hoặc import tất cả component của naive
import { defineNuxtPlugin } from '#app'
import naive from 'naive-ui
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(naive)
}
Để sử dụng với Server-side rendering thì ta thêm một chút trong file nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
build: {
transpile:
process.env.NODE_ENV === 'production'
? [
'naive-ui',
'vueuc',
'@css-render/vue3-ssr',
'@juggle/resize-observer',
]
: ['@juggle/resize-observer'],
},
vite: {
optimizeDeps: {
include:
process.env.NODE_ENV === 'development'
? ['naive-ui', 'vueuc', 'date-fns-tz/esm/formatInTimeZone']
: []
}
}
})
Custom lại theme của naive
Mặc định theme của naive có màu xanh lá cây cho nên các hiệu ứng như forcus hay hover.... đều có màu này. Để cho phù hợp với màu chủ đạo của dự án chúng ta nên custom lại theme của naive. Ở đây mình ví dụ custom lại theme của naive trong layout với màu chủ đạo là #377dff. Mình sử dụng layouts/default.vue làm layout mặc định cho toàn bộ dự án:
<template>
<div>
<n-config-provider :theme-overrides="getThemeOverrides">
<slot />
</n-config-provider>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from 'vue'
defineComponent({
name: 'DefaultLayout',
})
const appTheme = '#377dff'
const getThemeOverrides = {
common: {
primaryColor: appTheme,
primaryColorHover: appTheme,
primaryColorPressed: appTheme,
primaryColorSuppl: appTheme,
},
LoadingBar: {
colorLoading: appTheme,
},
}
Thay đổi ngôn ngữ mặc định của naive
Naive cũng hỗ trợ rất nhiều ngôn ngữ trên thế giới trong đó có cả Tiếng Việt. Để sử dụng Tiếng Việt hay tiếng của các nước khác thì anh em có thể làm thế này:
<template>
<n-config-provider :locale="viVN" :date-locale="dateEnUS">
<app />
</n-config-provider>
</template>
<script setup lang="ts">
import { defineComponent } from 'vue'
import { NConfigProvider } from 'naive-ui'
import { viVN, dateViVN } from 'naive-ui'
</script>
Để xem naive ui hỗ trợ các ngôn ngữ nào thì mọi người có thể xem ở đây: https://www.naiveui.com/en-US/os-theme/docs/i18n
Xử lý conflict style
Trong quá trình sử dụng naive ui có thể anh em sẽ bị conflict style với tailwind hay các bộ công cụ khác đang sử dụng. Điều này có thể gây ra việc các component hiển thị không giống như chúng ta mong muốn. Được cái là css cho các component Naive cũng dễ dàng hơn chứ không như ông Element UI nhiều khi phải css phải thêm !important các kiểu mới nhận. Để xử lý việc này thì chúng ta có thể thêm đoạn code sau: Với Vue
const meta = document.createElement('meta')
meta.name = 'naive-ui-style'
document.head.appendChild(meta)
vueApp.mount('#app')
Với nuxt
app: {
....
meta: [
...
{ name: 'naive-ui-style' },
{ name: 'vue-style' },
],
...
},
},
Các thư viện bên thứ ba
Chủ yếu các thư viện này là bên admin sử dụng trông cũng ngon nghẻ phết giống như kiểu template sẵn cho admin anh em có thể xem thử ở đây: https://www.naiveui.com/en-US/os-theme/docs/community
Vậy là mình đã giới thiệu xong với a/c em về bộ thư viện Naive UI này rồi. Trong quá trình viết bài khó tránh khỏi các sai sót mong nhận được sự góp ý từ mọi người và cuối cùng là cảm ơn anh chị em đã bỏ thời gian để đọc, nếu yêu quý mình mọi người có thể follow để theo dõi những bài viết của mình nhé =)))).
All rights reserved
