UI Components Alpha
🛑 This package is in Alpha stage.
This package is still in the Alpha stage, and it is not recommended to use it in production. The API may change in the future, and there may be bugs in the current version. Please use it with caution.
🚧 Constructing
Nice to meet you! But sorry, this page is still under construction. If you don’t find the information you are interested in, you can first find the content you are interested in in the navigation in the sidebar to start reading.
How to use
🙋 Before install
Currently @nolebase/ui is still under development, and will be used by other Nolebase Integrations components now (such as vitepress-plugin-git-changelog). And those components and integrations of Nolebase Integrations will configure the needed options and settings to bundle and transform the underlying dependencies.
Therefore, if you would ever want to install @nolebase/ui as one of your dependencies, you would need to configure a few configurations before proceeding:
1. Additional configurations for Vite
1.1 For users who imported <NuLazyTeleportRiveCanvas /> component
Since <NuLazyTeleportRiveCanvas /> depends on @rive-app/canvas. If you also use Vite as your bundler, you will need to add the following configurations to your vite.config.ts file like this:
import { defineConfig } from 'vite'
export default defineConfig(() => {
return {
optimizeDeps: {
include: [
// Add this line to your vite.config.ts's optimizeDeps.include array //
'@nolebase/ui-rive-canvas > @rive-app/canvas',
],
},
}
})For more information about why configure this, please refer to the Dep Optimization Options | Vite documentation.
1.2 For users who imported VitePress related components
If you are using VitePress, and imported components relies on VitePress, you will need to add the following configurations to your vite.config.ts file like this:
import { defineConfig } from 'vite'
export default defineConfig(() => {
return {
ssr: {
noExternal: [
// Add this line to your vite.config.ts's ssr.noExternal array //
'@nolebase/ui',
],
},
}
})For more information about why configure this, please refer to the Server-Side Rendering | Vite documentation.
Installation
You can install @nolebase/ui as one of your Vue or VitePress project dependencies with the following command:
pnpm add @nolebase/ui -Dnpm install @nolebase/ui -Dyarn add @nolebase/ui -D
Neko
Rizumu