Vue standalone integration

build.config.ts

@@ -0,0 +1,11 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    'src/module',
+    {
+      input: 'integrations/vue/index',
+      name: 'integrations/vue/index',
+    },
+  ],
+})

docs/content/1.getting-started/2.installation.md

@@ -56,3 +56,40 @@ export default defineNuxtConfig({
 })
 ```
 ::
+
+## Vue Plugin
+
+For standard Vue applications, you can use the Vue plugin to install the library.
+
+::steps
+### Install the package
+
+Install `nanime` using your package manager of choice:
+
+::code-group
+```bash [npm]
+npm install nanime
+```
+```bash [pnpm]
+pnpm add nanime
+```
+```bash [bun]
+bun add nanime
+```
+::
+
+### Register the plugin
+
+Register the plugin in your `main.ts` or `app.ts`:
+
+```typescript [src/main.ts] {2, 7}
+import { createApp } from 'vue'
+import { AnimePlugin } from 'nanime/vue'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(AnimePlugin)
+app.mount('#app')
+```
+::

integrations/vue/index.ts

@@ -0,0 +1,30 @@
+import type { Plugin } from 'vue'
+import Slide from '../../src/runtime/app/components/transition/Slide.vue'
+import Scale from '../../src/runtime/app/components/transition/Scale.vue'
+
+export { useAnimate } from '../../src/runtime/app/composables/useAnimate'
+export { useAnimatable } from '../../src/runtime/app/composables/useAnimatable'
+export { useDraggable } from '../../src/runtime/app/composables/useDraggable'
+export { useAnimeLayout } from '../../src/runtime/app/composables/useLayout'
+export { useSplitText } from '../../src/runtime/app/composables/useSplitText'
+export { useWaapiAnimate } from '../../src/runtime/app/composables/useWaapiAnimate'
+export { default as Slide } from '../../src/runtime/app/components/transition/Slide.vue'
+export { default as Scale } from '../../src/runtime/app/components/transition/Scale.vue'
+
+export interface AnimePluginOptions {
+  /**
+   * Prefix for components
+   * @default 'A'
+   */
+  prefix?: string
+}
+
+const AnimePlugin: Plugin<AnimePluginOptions> = {
+  install(app, options) {
+    const prefix = options?.prefix ?? 'A'
+    app.component(`${prefix}Slide`, Slide)
+    app.component(`${prefix}Scale`, Scale)
+  },
+}
+
+export { AnimePlugin }

package.json

@@ -12,6 +12,10 @@
     ".": {
       "types": "./dist/types.d.mts",
       "import": "./dist/module.mjs"
+    },
+    "./vue": {
+      "import": "./dist/integrations/vue/index.mjs",
+      "types": "./dist/integrations/vue/index.d.mts"
     }
   },
   "main": "./dist/module.mjs",