Example/page transition

playground/vite/package.json

@@ -12,7 +12,8 @@
     "@vueuse/core": "^10.5.0",
     "@vueuse/motion": "^2.0.0",
     "hero-motion": "workspace:^",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",

playground/vite/src/App.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
 import { HeroProvider } from 'hero-motion'
 import { Tab, Tabs } from './components/Tabs'
@@ -12,7 +12,7 @@ function onSelect(value) {
 
 <template>
   <HeroProvider>
-    <div class="p-6">
+    <div class="p-6 flex flex-col gap-3">
       <Tabs>
         <Tab :is-active="activeTab === 'A'" @click="onSelect('A')">
           TabA
@@ -21,6 +21,8 @@ function onSelect(value) {
           TabB
         </Tab>
       </Tabs>
+
+      <RouterView />
     </div>
   </HeroProvider>
 </template>

playground/vite/src/components/Avatar.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Hero } from 'hero-motion'
+
+defineProps<{
+  id: number | string
+  size?: number | string
+}>()
+</script>
+
+<template>
+  <Hero :layout-id="`avatar:${id}`" :style="{ width: `${size}px`, height: `${size}px` }" class="text-white rounded-lg flex items-center justify-center uppercase overflow-hidden">
+    <img src="https://avatars.githubusercontent.com/u/40710111?s=96&v=4">
+  </Hero>
+</template>

playground/vite/src/main.js

@@ -1,5 +1,17 @@
 import { createApp } from 'vue'
-import './style.css'
+import { createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+import './style.css'
+
+const routes = [
+  { path: '/', component: () => import('./pages/index.vue') },
+  { path: '/:id', component: () => import('./pages/[id].vue') },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+createApp(App).use(router).mount('#app')

playground/vite/src/pages/[id].vue

@@ -0,0 +1,29 @@
+<script setup>
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useFetch } from '@vueuse/core'
+import Avatar from '../components/Avatar.vue'
+
+const route = useRoute()
+const router = useRouter()
+const { data } = useFetch(`https://ungh.cc/users/${route.params.id}`).get().json()
+const user = computed(() => data.value?.user ?? {})
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 cursor-pointer" @click="router.go(-1)">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+    </svg>
+
+    <div class="flex gap-6">
+      <div class="text-sm flex flex-col justify-between w-36">
+        <div>Username: {{ user.username }}</div>
+        <div>Name: {{ user.name }}</div>
+        <div>Twitter: {{ user.twitter || '--' }}</div>
+      </div>
+
+      <Avatar :id="route.params.id" size="80" />
+    </div>
+  </div>
+</template>

playground/vite/src/pages/index.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useFetch } from '@vueuse/core'
+import Avatar from '../components/Avatar.vue'
+
+const router = useRouter()
+const { data } = useFetch('https://ungh.cc/repos/unjs/h3/contributors').get().json()
+const contributors = computed(() => (data.value?.contributors ?? []).slice(0, 3))
+
+function onNavi({ username }) {
+  router.push(`/${username}`)
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div v-for="contributor of contributors" :key="contributor.id" class="flex items-center gap-4 p-3 bg-gray-50 rounded-xl shadow-sm cursor-pointer hover:shadow-xl hover:bg-gray-100 transition-all duration-300 w-64" @click="onNavi(contributor)">
+      <Avatar :id="contributor.username" size="40" />
+
+      <div>
+        <div class="text-sm font-bold">
+          {{ contributor.username }}
+        </div>
+        <div class="text-xs text-black/50">
+          contributions: {{ contributor.contributions }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>