diff --git a/apps/vue-app/src/App.vue b/apps/vue-app/src/App.vue
index fbff083..afe9715 100644
--- a/apps/vue-app/src/App.vue
+++ b/apps/vue-app/src/App.vue
@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
 
-const route = useRoute()
 </script>
 
 <template>
   <div>
+    <h1>Vue3</h1>
     <div>
-      <RouterView />
+      <router-view v-slot="{ Component }">
+        <transition>
+          <keep-alive>
+            <component :is="Component" />
+          </keep-alive>
+        </transition>
+      </router-view>
     </div>
     <div class="border-t">
       <RouterLink to="/">
diff --git a/apps/vue-app/src/main.ts b/apps/vue-app/src/main.ts
index 90b8a8d..823de6b 100644
--- a/apps/vue-app/src/main.ts
+++ b/apps/vue-app/src/main.ts
@@ -11,9 +11,13 @@ if (window.__POWERED_BY_WUJIE__) {
     instance = createApp(App)
     instance.use(router)
     instance.mount('#app')
+    window.$router = router
+    window.$instance = instance
   }
   window.__WUJIE_UNMOUNT = () => {
     instance.unmount()
+    delete window.$router
+    delete window.$instance
   }
 }
 else {
diff --git a/apps/vue-app/src/pages/bar.vue b/apps/vue-app/src/pages/bar.vue
index 2754825..7dabfce 100644
--- a/apps/vue-app/src/pages/bar.vue
+++ b/apps/vue-app/src/pages/bar.vue
@@ -5,6 +5,7 @@
 <template>
   <div>
     bar
+    <input type="range">
   </div>
 </template>
 
diff --git a/apps/vue-app/src/pages/foo.vue b/apps/vue-app/src/pages/foo.vue
index 1ace98f..d79ee19 100644
--- a/apps/vue-app/src/pages/foo.vue
+++ b/apps/vue-app/src/pages/foo.vue
@@ -5,6 +5,7 @@
 <template>
   <div>
     foo
+    <input type="range">
   </div>
 </template>
 
diff --git a/apps/vue-app/src/pages/index.vue b/apps/vue-app/src/pages/index.vue
index 5105537..2844e9b 100644
--- a/apps/vue-app/src/pages/index.vue
+++ b/apps/vue-app/src/pages/index.vue
@@ -5,6 +5,7 @@
 <template>
   <div>
     index
+    <input type="range">
   </div>
 </template>
 
diff --git a/apps/vue-app/src/style.css b/apps/vue-app/src/style.css
index ab8d279..a9c177b 100644
--- a/apps/vue-app/src/style.css
+++ b/apps/vue-app/src/style.css
@@ -5,7 +5,7 @@
 a {
   @apply block text-slate-400 border-current font-semibold underline;
 
-  &.router-link-active {
+  &.router-link-exact-active {
     @apply text-sky-500;
   }
 }
diff --git a/apps/vue2-app/src/App.vue b/apps/vue2-app/src/App.vue
index c204a48..4d666b6 100644
--- a/apps/vue2-app/src/App.vue
+++ b/apps/vue2-app/src/App.vue
@@ -1,7 +1,29 @@
+<script setup lang="ts">
+
+</script>
+
 <template>
-  <transition>
-    <keep-alive>
-      <RouterView />
-    </keep-alive>
-  </transition>
+  <div>
+    <h1>Vue2</h1>
+    <div>
+      <transition>
+        <keep-alive>
+          <router-view />
+        </keep-alive>
+      </transition>
+    </div>
+    <div class="border-t">
+      <RouterLink to="/">
+        Index
+      </RouterLink>
+      <RouterLink to="/foo">
+        Foo
+      </RouterLink>
+      <RouterLink to="/bar">
+        Bar
+      </RouterLink>
+    </div>
+  </div>
 </template>
+
+<style scoped></style>
diff --git a/apps/vue2-app/src/assets/tailwindcss.svg b/apps/vue2-app/src/assets/tailwindcss.svg
deleted file mode 100644
index 6a9ab49..0000000
--- a/apps/vue2-app/src/assets/tailwindcss.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33"><g clip-path="url(#prefix__clip0)"><path fill="#38bdf8" fill-rule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" clip-rule="evenodd"/></g><defs><clipPath id="prefix__clip0"><path fill="#fff" d="M0 0h54v32.4H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/apps/vue2-app/src/assets/vue.svg b/apps/vue2-app/src/assets/vue.svg
deleted file mode 100644
index 770e9d3..0000000
--- a/apps/vue2-app/src/assets/vue.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
diff --git a/apps/vue2-app/src/components/HelloWorld.vue b/apps/vue2-app/src/components/HelloWorld.vue
deleted file mode 100644
index a9e3eb0..0000000
--- a/apps/vue2-app/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import { useStore } from '../store'
-import router from '../router'
-
-defineProps<{ msg: string }>()
-
-const store = useStore()
-
-function go2Bar() {
-  // debugger
-  router.push({
-    path: '/bar',
-  })
-}
-</script>
-
-<template>
-  <div class="space-y-2 text-center">
-    <h1>{{ msg }}</h1>
-
-    <div>
-      <button class="bg-pink-100" type="button" @click="store.increment()">
-        count is {{ store.count }}
-      </button>
-      <p class="text-yellow-800" @click="go2Bar">
-        Double count {{ store.double }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/apps/vue2-app/src/main.ts b/apps/vue2-app/src/main.ts
index e856eba..0eb3eb3 100644
--- a/apps/vue2-app/src/main.ts
+++ b/apps/vue2-app/src/main.ts
@@ -1,17 +1,25 @@
 import Vue from 'vue'
 import './style.css'
 import { PiniaVuePlugin, createPinia } from 'pinia'
+import VueRouter from 'vue-router'
 import App from './App.vue'
-import router from './router'
+import { routes } from './router'
 
 Vue.use(PiniaVuePlugin)
 Vue.config.productionTip = false
 
 const pinia = createPinia()
-/* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  router,
-  render: h => h(App),
-  pinia,
-})
+
+if (window.__POWERED_BY_WUJIE__) {
+  let instance
+  window.__WUJIE_MOUNT = () => {
+    const router = new VueRouter({ routes })
+    instance = new Vue({ router, render: h => h(App), pinia }).$mount('#app')
+  }
+  window.__WUJIE_UNMOUNT = () => {
+    instance.$destroy()
+  }
+}
+else {
+  new Vue({ router: new VueRouter({ routes }), render: h => h(App), pinia }).$mount('#app')
+}
diff --git a/apps/vue2-app/src/pages/bar.vue b/apps/vue2-app/src/pages/bar.vue
new file mode 100644
index 0000000..7dabfce
--- /dev/null
+++ b/apps/vue2-app/src/pages/bar.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    bar
+    <input type="range">
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/apps/vue2-app/src/pages/foo.vue b/apps/vue2-app/src/pages/foo.vue
new file mode 100644
index 0000000..d79ee19
--- /dev/null
+++ b/apps/vue2-app/src/pages/foo.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    foo
+    <input type="range">
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/apps/vue2-app/src/pages/index.vue b/apps/vue2-app/src/pages/index.vue
new file mode 100644
index 0000000..2844e9b
--- /dev/null
+++ b/apps/vue2-app/src/pages/index.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    index
+    <input type="range">
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/apps/vue2-app/src/router.ts b/apps/vue2-app/src/router.ts
index 865d2c6..a0f836f 100644
--- a/apps/vue2-app/src/router.ts
+++ b/apps/vue2-app/src/router.ts
@@ -1,18 +1,15 @@
 import Vue from 'vue'
 import type { RouteConfig } from 'vue-router'
 import VueRouter from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
 
-Vue.use(VueRouter)
+import Index from './pages/index.vue'
+import Bar from './pages/bar.vue'
+import Foo from './pages/foo.vue'
 
 export const routes: RouteConfig[] = [
-  { path: '/', component: HelloWorld, props: { msg: 'Home' } },
-  { path: '/bar', component: HelloWorld, props: { msg: 'Bar' } },
+  { path: '/', component: Index },
+  { path: '/foo', component: Foo },
+  { path: '/Bar', component: Bar },
 ]
 
-const router = new VueRouter({
-  mode: 'history',
-  routes,
-})
-
-export default router
+Vue.use(VueRouter)
diff --git a/apps/vue2-app/src/style.css b/apps/vue2-app/src/style.css
index bd6213e..a9c177b 100644
--- a/apps/vue2-app/src/style.css
+++ b/apps/vue2-app/src/style.css
@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+a {
+  @apply block text-slate-400 border-current font-semibold underline;
+
+  &.router-link-exact-active {
+    @apply text-sky-500;
+  }
+}