Version

3.2.6

Reproduction link

github.com

Steps to reproduce

• npm init vite@latest my-vue-app --template vue-ts

• npm install

• npm install vue-router@4

• add code in App.vue

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
import {useRouter} from 'vue-router'

const router = useRouter()
router.afterEach(() => console.log('hello vue-router'))
</script>

• npm run dev

What is expected?

.

What is actually happening?

[Vue warn]: injection "Symbol([vue-router]: router)" not found. 
  at <App>

[Vue warn]: Unhandled error during execution of setup function 
  at <App>

App.vue:8 Uncaught TypeError: Cannot read property 'afterEach' of undefined
    at setup (App.vue:8)
    at callWithErrorHandling (runtime-core.esm-bundler.js:6990)
    at setupStatefulComponent (runtime-core.esm-bundler.js:6606)
    at setupComponent (runtime-core.esm-bundler.js:6562)
    at mountComponent (runtime-core.esm-bundler.js:4421)
    at processComponent (runtime-core.esm-bundler.js:4396)
    at patch (runtime-core.esm-bundler.js:3991)
    at render2 (runtime-core.esm-bundler.js:5140)
    at mount (runtime-core.esm-bundler.js:3477)
    at Object.app.mount (runtime-dom.esm-bundler.js:1515)

I tried not to use setup-script but still got the same error.

<script lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import { defineComponent } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  components: { HelloWorld },
  setup() {
    const router = useRouter();
    router.afterEach(() => console.log("hello vue-router"));
  },
});
</script>

Sorry, I forgot the createRouter. 😢