chore: upgrade deps and use client only in nuxt

package.json

@@ -1,7 +1,7 @@
 {
   "name": "hero-motion",
   "version": "0.5.1",
-  "packageManager": "pnpm@9.13.2",
+  "packageManager": "pnpm@9.14.4",
   "description": "A shared layout animations for vue like framer motion.",
   "author": "zekun.jin",
   "license": "MIT",
@@ -51,18 +51,18 @@
     "vue": ">=3.0.0"
   },
   "dependencies": {
-    "@vueuse/core": "^11.2.0",
+    "@vueuse/core": "^12.0.0",
     "defu": "^6.1.4",
     "destr": "^2.0.3",
     "scule": "^1.3.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.9.1",
-    "@vue/tsconfig": "^0.6.0",
-    "eslint": "^9.15.0",
+    "@antfu/eslint-config": "^3.11.2",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.16.0",
     "tsup": "^8.3.5",
-    "typescript": "^5.6.3",
-    "vitest": "^2.1.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8",
     "vue": "^3.5.13"
   }
 }

packages/core/src/composables/use-style.ts

@@ -42,9 +42,6 @@ function useTransform(target: PermissiveTarget) {
 export function useStyle(target: PermissiveTarget, options: UseStyleOptions = {}) {
   const transform = ref<Partial<Transform>>({})
 
-  if (import.meta.server)
-    return { transform }
-
   let observer: MutationObserver
   const domRef = toRef(target)
 

packages/nuxt/package.json

@@ -17,8 +17,8 @@
   },
   "devDependencies": {
     "@hero-motion/core": "workspace:*",
-    "@nuxt/kit": "^3.14.159",
+    "@nuxt/kit": "^3.14.1592",
     "@nuxt/module-builder": "^0.8.4",
-    "nuxt": "^3.14.159"
+    "nuxt": "^3.14.1592"
   }
 }

packages/nuxt/src/runtime/components/Hero.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Transition as MotionTransition } from '@vueuse/motion'
 import { useRuntimeConfig } from '#app'
-import { computed } from '#imports'
+import { computed, useAttrs } from '#imports'
 import { Hero } from 'hero-motion'
 
 export type Transition = MotionTransition
@@ -17,16 +17,20 @@ const emit = defineEmits(['complete'])
 
 const config = useRuntimeConfig()
 const ctx = computed(() => config.public.hero ?? {})
+const attrs = useAttrs()
 </script>
 
 <template>
-  <Hero
-    :as="as"
-    :layout-id="layoutId"
-    :transition="{ ...ctx.transition, ...transition }"
-    :ignore="ignore"
-    @complete="emit('complete')"
-  >
-    <slot />
-  </Hero>
+  <ClientOnly>
+    <Hero
+      :as="as"
+      :layout-id="layoutId"
+      :transition="{ ...ctx.transition, ...transition }"
+      :ignore="ignore"
+      :style="attrs.style"
+      @complete="emit('complete')"
+    >
+      <slot />
+    </Hero>
+  </ClientOnly>
 </template>

packages/nuxt/src/shims.d.ts

@@ -7,9 +7,7 @@ declare module '#app' {
 }
 
 declare module '#imports' {
-  import { computed } from 'vue'
-
-  export const computed
+  export * from 'vue'
 }
 
 declare module 'hero-motion' {

playgrounds/nuxt/app.vue

@@ -3,8 +3,21 @@ const isLarge = ref(false)
 </script>
 
 <template>
-  <div :transition="{ type: 'spring' }">
-    <Hero v-if="!isLarge" layout-id="1" style="width: 50px; height: 50px; background: #f43f5e;" @click="isLarge = !isLarge" />
-    <Hero v-else layout-id="1" style="width: 100px; height: 100px; background: #2dd4bf;" @click="isLarge = !isLarge" />
+  <div>
+    <button style="margin-bottom: 4px;" @click="isLarge = !isLarge">
+      Trigger
+    </button>
+
+    <Hero v-if="!isLarge" layout-id="1" style="width: 100px; height: 100px; background-color: #f43f5e; display: flex; align-items: center; justify-content: center;">
+      <div>
+        Content
+      </div>
+    </Hero>
+
+    <Hero v-else layout-id="1" style="width: 200px; height: 200px; background-color: #2dd4bf; display: flex; align-items: center; justify-content: center;">
+      <div>
+        Content
+      </div>
+    </Hero>
   </div>
 </template>

playgrounds/nuxt/nuxt.config.ts

@@ -6,7 +6,8 @@ export default defineNuxtConfig({
 
   hero: {
     transition: {
-      type: 'spring',
+      type: 'keyframe',
+      duration: 5000,
     },
   },
 })

playgrounds/nuxt/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "hero-motion": "workspace:*",
-    "nuxt": "^3.14.159",
+    "nuxt": "^3.14.1592",
     "vue": "latest",
     "vue-router": "latest"
   }

playgrounds/vite/package.json

@@ -8,17 +8,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vueuse/core": "^11.2.0",
+    "@vueuse/core": "^12.0.0",
     "@vueuse/motion": "^2.2.6",
     "hero-motion": "workspace:*",
     "vue": "^3.5.13",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.0",
+    "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.15",
-    "vite": "^5.4.11"
+    "tailwindcss": "^3.4.16",
+    "vite": "^6.0.2"
   }
 }