How to access routing parameters in Vue.js - Nuxt - TypeScript application?

Question

I'm building a website that is based on Nuxt TypeScript Starter template. I've created a dynamically routed page _id.vue inside of my pages folder and I want to have access to that id property inside of my TS class. I can access it in my template by writing {{$route.params.id}} but when I try to reference $route inside of the class I get an error:

error TS2304: Cannot find name '$route'.

Answer 1

As a simple solution, try importing route from vue-router, like this:

<script lang="ts">
import Component from "vue-class-component"
import { Route } from "vue-router"

@Component({})
export default class RoutingExample extends Vue {
    created() {
        console.log(this.$route) // this should not throw TS errors now
    }

}
</script>

Other solutions I think would require you to augment the Vue module, something similar to what you'd find here in the Vue docs.

More Vue + TypeScript examples can be found in this repo: https://github.com/jsonberry/vue-typescript-examples