How to access routing parameters in Vue.js - Nuxt - TypeScript application?
Solution 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
Solution 2
better and the right solution for nuxtjs project to find current page URL or param just use
{{ $nuxt.$route.name }}
Andrew Bogdanov
Updated on June 07, 2022Comments
-
Andrew Bogdanov almost 2 years
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'.