diff --git a/.vscode/settings.json b/.vscode/settings.json
index ca2e460c..0c33539d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -18,7 +18,8 @@
"Rehype",
"resvg",
"unconfig",
- "uncrypto"
+ "uncrypto",
+ "Nisekoi5"
],
"prettier.enable": false,
"editor.formatOnSave": false,
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 652e16b5..10664d35 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,10 +1,10 @@
import { h } from 'vue'
+import { NuLazyTeleportRiveCanvas } from '@nolebase/ui'
import { NolebasePluginSet, defineThemeUnconfig } from '@nolebase/unconfig-vitepress'
import IntegrationCard from './components/IntegrationCard.vue'
import HomeContent from './components/HomeContent.vue'
-import RiveCanvas from './components/RiveCanvas.vue'
import 'virtual:uno.css'
@@ -16,7 +16,7 @@ export default defineThemeUnconfig({
slots: {
'layout-top': {
node: [
- () => h(RiveCanvas),
+ () => h(NuLazyTeleportRiveCanvas),
],
},
},
diff --git a/packages/ui/README.md b/packages/ui/README.md
new file mode 100644
index 00000000..6887774c
--- /dev/null
+++ b/packages/ui/README.md
@@ -0,0 +1,75 @@
+# `@nolebase/ui`
+
+A collection of Vue components Nolebase uses.
+
+> [!CAUTION] 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.
+
+> [!IMPORTANT] Before install
+>
+> Currently `@nolebase/ui` is still under development, and will be used by other [Nolebase Integrations](https://nolebase-integrations.ayaka.io) components now. There are a few configurations that needed to be configured if you would ever want to install `@nolebase/ui` as one of your dependencies:
+>
+> ### 1. Additional configurations for Vite
+>
+> #### 1.1 For users who imported `` component
+>
+> Since `` 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
+> export default defineConfig(() => {
+> return {
+> optimizeDeps: {
+> include: [
+> // Add this line to your vite.config.ts
+> '@nolebase/ui > @rive-app/canvas',
+> ],
+> },
+> }
+> })
+> ```
+>
+> For more information about why configure this, please refer to the [Dep Optimization Options | Vite](https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-exclude) documentation.
+>
+> #### 1.2 For users who imported VitePress related components
+>
+> If you are using VitePress, you will need to add the following configurations to your `vite.config.ts` file like this:
+>
+> ```typescript
+> export default defineConfig(() => {
+> return {
+> ssr: {
+> noExternal: [
+> // Add this line to your vite.config.ts
+> '@nolebase/ui',
+> ],
+> },
+> }
+> })
+> ```
+>
+> For more information about why configure this, please refer to the [Server-Side Rendering | Vite](https://vitejs.dev/guide/ssr.html#ssr-externals) documentation.
+
+## Install
+
+### Npm
+
+```shell
+npm i @nolebase/ui -D
+```
+
+### Yarn
+
+```shell
+yarn add @nolebase/ui -D
+```
+
+### Pnpm
+
+```shell
+pnpm add @nolebase/ui -D
+```
+
+## Documentation
+
+Please refer to [UI Components](https://nolebase-integrations.ayaka.io/pages/en/ui/) for more information.
diff --git a/packages/ui/build.config.ts b/packages/ui/build.config.ts
index 2383b217..9afb4770 100644
--- a/packages/ui/build.config.ts
+++ b/packages/ui/build.config.ts
@@ -29,4 +29,8 @@ export default defineBuildConfig({
],
declaration: true,
clean: true,
+ externals: [
+ '@rive-app/canvas',
+ 'vue',
+ ],
})
diff --git a/packages/ui/package.json b/packages/ui/package.json
index e92171c0..85a47e8d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,7 +1,7 @@
{
"name": "@nolebase/ui",
"type": "module",
- "version": "1.25.12",
+ "version": "1.25.2",
"description": "A collection of Vue components Nolebase uses.",
"author": {
"name": "Nólëbase",
@@ -68,6 +68,9 @@
"peerDependencies": {
"vue": "^3.2.0"
},
+ "dependencies": {
+ "@rive-app/canvas": "^2.11.1"
+ },
"devDependencies": {
"@vue/tsconfig": "^0.5.1"
}
diff --git a/docs/.vitepress/theme/components/RiveCanvas.vue b/packages/ui/src/components/NuLazyTeleportRiveCanvas.vue
similarity index 96%
rename from docs/.vitepress/theme/components/RiveCanvas.vue
rename to packages/ui/src/components/NuLazyTeleportRiveCanvas.vue
index c5a8c382..a972a764 100644
--- a/docs/.vitepress/theme/components/RiveCanvas.vue
+++ b/packages/ui/src/components/NuLazyTeleportRiveCanvas.vue
@@ -1,10 +1,10 @@