diff --git a/playground/pages/add-route-middleware.vue b/playground/pages/add-route-middleware.vue
new file mode 100644
index 00000000..618b6ee2
--- /dev/null
+++ b/playground/pages/add-route-middleware.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>navigate to navigate-target</div>
+</template>
+<script>
+export default defineComponent({
+  middleware: 'local-middleware'
+})
+</script>
diff --git a/playground/plugins/setup.js b/playground/plugins/setup.js
index 0d3166d2..6907dd45 100644
--- a/playground/plugins/setup.js
+++ b/playground/plugins/setup.js
@@ -1,12 +1,19 @@
 import { onGlobalSetup, ref } from '@nuxtjs/composition-api'
 
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin, addRouteMiddleware, navigateTo } from '#app'
 
 export default defineNuxtPlugin(() => {
   const globalsetup = ref('🚧')
   onGlobalSetup(() => {
     globalsetup.value = '✅'
   })
+
+  addRouteMiddleware('local-middleware', (to) => {
+    if (to.path === '/add-route-middleware') {
+      return navigateTo('/navigation-target')
+    }
+  })
+
   return {
     provide: {
       globalsetup
diff --git a/test/bridge.test.ts b/test/bridge.test.ts
index 0b75b303..1951393d 100644
--- a/test/bridge.test.ts
+++ b/test/bridge.test.ts
@@ -162,6 +162,12 @@ describe('middleware', () => {
     })
     expect(res.status).toEqual(401)
   })
+
+  it('should redirect to navigation-target', async () => {
+    const html = await $fetch('/add-route-middleware')
+
+    expect(html).toContain('Navigated successfully')
+  })
 })
 
 describe('dynamic paths', () => {