fix(nuxt): improve module build output path and component ref handling

- Move Nuxt module output to dist/nuxt/ for cleaner build structure
- Add support for Vue component refs in attachTo.element
- Add null-safe checks for element.style to prevent SSR errors
- Refactor interaction functions for better code clarity

Author: fatihsolhan

build.config.ts

@@ -2,9 +2,10 @@ import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
   entries: ['src/nuxt/module'],
+  outDir: 'dist/nuxt',
   externals: ['@nuxt/kit', '@nuxt/schema', 'v-onboarding'],
   declaration: true,
-  clean: false,
+  clean: true,
   rollup: {
     emitCJS: false
   }

package.json

@@ -35,8 +35,8 @@
     },
     "./dist/style.css": "./dist/style.css",
     "./nuxt": {
-      "types": "./dist/module.d.ts",
-      "import": "./dist/module.mjs"
+      "types": "./dist/nuxt/module.d.ts",
+      "import": "./dist/nuxt/module.mjs"
     }
   },
   "scripts": {

src/components/VOnboardingWrapper.vue

@@ -38,30 +38,21 @@ const isActive = computed(() => currentIndex.value >= 0 && currentIndex.value <
 const isFirstStep = computed(() => currentIndex.value === 0)
 const isLastStep = computed(() => currentIndex.value === props.steps.length - 1)
 
-const getStepOptions = (step?: StepEntity) => {
+function getStepOptions(step?: StepEntity): VOnboardingWrapperOptions {
   return step ? merge({}, mergedOptions.value, step.options) : mergedOptions.value
 }
 
 const POINTER_ATTR = 'data-v-onboarding-pointer-events'
 
-const blockInteraction = (element: HTMLElement | null) => {
-  if (!element) return
-  if (element.style.pointerEvents === 'none') return
+function setInteraction(element: HTMLElement | null, value: 'none' | 'auto'): void {
+  if (!element?.style || element.style.pointerEvents === value) return
   const current = element.style.pointerEvents
   if (current) element.setAttribute(POINTER_ATTR, current)
-  element.style.pointerEvents = 'none'
+  element.style.pointerEvents = value
 }
 
-const allowInteraction = (element: HTMLElement | null) => {
-  if (!element) return
-  if (element.style.pointerEvents === 'auto') return
-  const current = element.style.pointerEvents
-  if (current) element.setAttribute(POINTER_ATTR, current)
-  element.style.pointerEvents = 'auto'
-}
-
-const restoreInteraction = (element: HTMLElement | null) => {
-  if (!element) return
+function restoreInteraction(element: HTMLElement | null): void {
+  if (!element?.style) return
   const stored = element.getAttribute(POINTER_ATTR)
   if (stored) {
     element.style.pointerEvents = stored
@@ -71,7 +62,17 @@ const restoreInteraction = (element: HTMLElement | null) => {
   }
 }
 
-const runSetup = (step: StepEntity, index: number, direction: Direction) => {
+function createHookOptions(step: StepEntity, index: number, direction: Direction) {
+  return {
+    index,
+    step,
+    direction,
+    isForward: direction === Direction.FORWARD,
+    isBackward: direction === Direction.BACKWARD,
+  }
+}
+
+function runSetup(step: StepEntity, index: number, direction: Direction) {
   const element = useGetElement(step.attachTo.element) as HTMLElement
   const options = getStepOptions(step)
 
@@ -80,18 +81,14 @@ const runSetup = (step: StepEntity, index: number, direction: Direction) => {
   }
 
   if (options?.overlay?.preventOverlayInteraction) {
-    blockInteraction(document.body)
-    allowInteraction(element)
+    setInteraction(document.body, 'none')
+    setInteraction(element, 'auto')
   }
 
-  return step.on?.beforeStep?.({
-    index, step, direction,
-    isForward: direction === Direction.FORWARD,
-    isBackward: direction === Direction.BACKWARD,
-  } as onBeforeStepOptions)
+  return step.on?.beforeStep?.(createHookOptions(step, index, direction) as onBeforeStepOptions)
 }
 
-const runCleanup = (step: StepEntity, index: number, direction: Direction) => {
+function runCleanup(step: StepEntity, index: number, direction: Direction) {
   const element = useGetElement(step.attachTo.element) as HTMLElement
   const options = getStepOptions(step)
 
@@ -103,14 +100,10 @@ const runCleanup = (step: StepEntity, index: number, direction: Direction) => {
     restoreInteraction(element)
   }
 
-  return step.on?.afterStep?.({
-    index, step, direction,
-    isForward: direction === Direction.FORWARD,
-    isBackward: direction === Direction.BACKWARD,
-  } as onAfterStepOptions)
+  return step.on?.afterStep?.(createHookOptions(step, index, direction) as onAfterStepOptions)
 }
 
-const goToStep = (target: number | ((current: number) => number)) => {
+function goToStep(target: number | ((current: number) => number)): void {
   const newIndex = typeof target === 'function' ? target(currentIndex.value) : target
   const oldIndex = currentIndex.value
 
@@ -133,9 +126,11 @@ const goToStep = (target: number | ((current: number) => number)) => {
   })()
 }
 
-const start = () => goToStep(0)
+function start(): void {
+  goToStep(0)
+}
 
-const finish = () => {
+function finish(): void {
   const step = props.steps[currentIndex.value]
   const index = currentIndex.value
 
@@ -146,11 +141,15 @@ const finish = () => {
   if (step) runCleanup(step, index, Direction.FORWARD)
 }
 
-const exit = () => emit('exit', currentIndex.value)
+function exit(): void {
+  emit('exit', currentIndex.value)
+}
 
-const previous = () => goToStep(i => i - 1)
+function previous(): void {
+  goToStep(i => i - 1)
+}
 
-const next = () => {
+function next(): void {
   if (isLastStep.value) {
     finish()
   } else {

src/composables/useGetElement.ts

@@ -1,40 +1,39 @@
 import { isRef } from "vue";
 import type { AttachableElement } from "@/types/lib";
 
-/**
- * Recursively search for an element within shadow DOMs
- */
 function querySelectorDeep(selector: string, root: Document | ShadowRoot | Element = document): Element | null {
-  // First try to find in the current root
-  const element = root.querySelector(selector);
-  if (element) return element;
+  const element = root.querySelector(selector)
+  if (element) return element
 
-  // Search in shadow roots of all elements
-  const allElements = root.querySelectorAll('*');
+  const allElements = root.querySelectorAll('*')
   for (const el of allElements) {
     if (el.shadowRoot) {
-      const found = querySelectorDeep(selector, el.shadowRoot);
-      if (found) return found;
+      const found = querySelectorDeep(selector, el.shadowRoot)
+      if (found) return found
     }
   }
 
-  return null;
+  return null
 }
 
-export default function useGetElement(element: AttachableElement) {
+export default function useGetElement(element: AttachableElement): Element | null {
   if (isRef(element)) {
-    return element.value ?? null;
+    const value = element.value
+    if (value && !(value instanceof Element) && value.$el) {
+      return value.$el
+    }
+    return value ?? null
   }
-  if (typeof element === "string") {
-    // First try normal querySelector (faster)
-    const found = document.querySelector(element);
-    if (found) return found;
 
-    // If not found, search within shadow DOMs
-    return querySelectorDeep(element);
+  if (typeof element === "string") {
+    const found = document.querySelector(element)
+    if (found) return found
+    return querySelectorDeep(element)
   }
-  else if (typeof element === 'function') {
-    return element();
+
+  if (typeof element === 'function') {
+    return element()
   }
-  return null;
+
+  return null
 }