feat: add directive

playground/app.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import SplitText from "../src/runtime/component.vue";
+import { vSplitText } from "../src/runtime/plugin.client";
 import { ref, useSplitText, useTimeoutFn } from "#imports";
 import { promiseTimeout } from "@vueuse/core";
 
@@ -33,6 +34,10 @@ useTimeoutFn(async () => {
     Hello! brudda
   </split-text>
 
+  <p v-split-text="{ splitBy: 'lines, words' }">
+    Yo yo yooooooo nuxt module playground
+  </p>
+
   <pre>
     {{ compRef?.el?.innerText }}
   </pre>

src/module.ts

@@ -24,7 +24,7 @@ export default defineNuxtModule<ModuleOptions>({
     const resolver = createResolver(import.meta.url);
 
     // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
-    addPlugin(resolver.resolve("./runtime/plugin"));
+    addPlugin(resolver.resolve("./runtime/plugin.client"));
     addImports({
       name: "useSplitText",
       as: "useSplitText",

src/runtime/directive.ts

@@ -0,0 +1,16 @@
+import { ObjectDirective } from "nuxt/dist/app/compat/capi";
+import { UseSplitTextOptions, useSplitText } from "./composable";
+import { directiveHooks } from "@vueuse/core";
+import SplitType from "split-type";
+
+type VSplitTextOptions = UseSplitTextOptions & {
+  onComplete?: (instance: SplitType) => void;
+};
+
+export const vSplitText: ObjectDirective<HTMLElement, VSplitTextOptions> = {
+  [directiveHooks.mounted]: (el, binding) => {
+    const { value } = binding;
+    const { onComplete } = useSplitText(el, value);
+    if (!!value.onComplete) onComplete(value.onComplete);
+  },
+};

src/runtime/plugin.client.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from "#app";
+import { vSplitText } from "./directive";
+export { vSplitText };
+
+export default defineNuxtPlugin((nuxt) => {
+  nuxt.vueApp.directive("split-text", vSplitText);
+});