Using this.$router not working


I’m using this code to navigate to another page but it doesn’t work because of TypeScript, it gives this error:

Property '$router' does not exist on type '{ openPage(p: object): void; }'.


<script lang="ts">
  methods: {
    openPage(p: object) {

If I remove …


… it works fine. Is there a specific issue with TypeScript not detecting this as a feature of Vue?

Thank you.

Hmmm, I’m testing this out now, and it seems to work fine for me.

Can you recreate the error in a sample git repo and share that?

Got the same. I do it like this

setup() {
  const router = useRouter();
  const openPage = function(){
  return { ..., openPage}

you are not using the “options” approach for composing your component… which is what @geodeveloper is doing. So this is another approach that would work, but it is not what the question is.

This is the full code / context:

      <ion-col size="6" v-for="p in publications" :key="">
        <img :src="p.img" @click="openPage(p)">

<script lang="ts">
import {IonCol, IonGrid, IonRow} from '@ionic/vue';
import {useRouter} from 'vue-router';
import store from './../store'

export default {
  components: {IonCol, IonGrid, IonRow},
  setup() {

      {id: 1, img: '', url: '/publication/1', code: 'CODE1'},
      {id: 2, img: '', url: '/publication/2', code: 'CODE2'},

    const router = useRouter();

    return {
  data() {
    return {
      publications: store.state.publications
  methods: {
    openPage(p: object) {

<style scoped>

ion-col img {
  width: 100%;
  height: 200px;


I still get the error:

what do you mean? I can’t see any difference from my app :thinking:

What about wrap image inside ion-item with router-link or href property?

Hi guys,

I solved the issue. It was failing because I was not using:

export default defineComponent({

Thank you all for your replies.