this.$matomo is not available in the context using TypeScript

[fbjorn]

Hi,

I installed the plugin this way:

    [
      "nuxt-matomo",
      {
        matomoUrl: "//matomo.my.domain/",
        siteId: 1,
        cookies: false,
      },
    ],

However during yarn generate I get the following error:

ERROR in components/ExportAs.vue:52:10
TS2339: Property '$matomo' does not exist on type 'ExportAs'.
    50 |
    51 |   foo() {
  > 52 |     this.$matomo.trackGoal(1)
       |          ^^^^^^^
    53 |   }
    54 |

As a result, I can't build my website.

FYI, I'm using JetBrains IDE, and they have rich autocomplete for such kind of injections, e.g nuxt-i18n:

Unfortunately, there's no for matomo:

Do you have any ideas how to resolve it, or at least bypass?

[azpery]

I have the same issue. Did you find a solution for this?

[azpery]

I found a fix : you have to declare $matomo yourself :

Create a file in ~/types/index.d.ts :

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $matomo: any | undefined
  }
}

Then add it in your tsconfig.json :

{
...
"types": [..., "types"]
...
}

Also keep in mind that matomo is disabled in dev mode. You can enable it by setting the debug option in your nuxt.config.js :

[
      'nuxt-matomo',
      { matomoUrl: '//eeee.matomo.cloud/', siteId: 1, debug: true },
    ],