Skip to content
CONSTRUCTING

UI Components Alpha

Word count
441 words
Reading time
3 minutes

🛑 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:

typescript
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.

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:

typescript
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:

shell
pnpm add @nolebase/ui -D
shell
npm install @nolebase/ui -D
shell
yarn add @nolebase/ui -D

Contributors

Changelog