Not usable in Vue 3 with Typescript?

[rrrodzilla]

Am I correct that this isn't working in Vue 3 with a typescript main.ts? The imported VueGtm type isn't assignable to the first param of the use function since that's expecting something that implements the install method of Plugin_2. Or am I just doing this wrong? Anybody been able to make this work?

Thanks,

Roland

//VueGtm is no bueno
app.use(VueGtm, {
    //...etc
  });

[craignicol]

I've been having the same problem myself, and it looks like the install property needs to be defined inside VueGtmObject in index.d.ts : https://forum.vuejs.org/t/issues-with-plugin-using-typescript/30877/2

I've patched vue-gtm locally and it appears to build and run OK, but I'm not sure what scenarios would need to be tested for this.

[Shinigami92]

Need to look into this later
@craignicol If you already have a working draft, please open a PR :)

edit: nevermind ^^ overlooked #96

[Shinigami92]

I looked into the code and I'm thinking that it's not correct that VueGtmObject has a install function, cause VueGtmObject is the definition of the underlying object and not the exported object within index.js

vue-gtm/src/index.js

Line 85 in 828d437

export default { install }

---

Also tested it with 3.0.0-rc.10

And changed the main.js to:

import { createApp } from "vue";
import App from "./App.vue";

import VueGtm from "vue-gtm";

const app = createApp(App);

app.use(VueGtm, {
  id: "GTM-xxxxxxx",
});

app.mount("#app");

---

In node_modules/@vue/runtime-core/dist/runtime-core.d.ts line 50
you also can see that Plugin_2 is the same as PluginObject from vue2 but doesn't provide information about the options anymore :(

[Shinigami92]

Ah now I understand!
I added typescript support and now I saw that Vue2's and Vue3's PluginFunction / PluginInstallFunction are not the same / not compatible ⚠️

So maybe we need to relax the own definitions, or we need to wait until Vue3 is released
And until then, you can use // @ts-expect-error: Wait for Vue 3 support

[Shinigami92]

Wow ... didn't expect Vue 3 to be released after a few days ...

My HIGHEST priority today will be to move typedefs to Vue 3 compatibility and then open a parallel branch+release vue-gtm: 3.0.0-vue2 that legacy support Vue 2

[Shinigami92]

@rrrodzilla @craignicol

I have released an alpha: https://www.npmjs.com/package/vue-gtm/v/3.0.0-alpha.1

Currently there is one problem... When using this.$gtm it gets not recognice by TypeScript 🤔
But when adding // @ts-ignore the code compiles and just work

Also I'm not sure what's the replacement for Vue.gtm, maybe Vue.$gtm or there is no replacement at all?! I'm completely new to Vue 3 and currently don't have a productive project written in Vue 3.

[Shinigami92]

Fixed a thing with https://www.npmjs.com/package/vue-gtm/v/3.0.0-alpha.3

But in this moment there could be a problem with vue-router-next (vuejs/router#419)
You can workaround this by adding at least the following to your src/shims-vue.d.ts:

import { /*NavigationGuard,*/ RouteLocationNormalizedLoaded, Router } from "vue-router";

declare module "@vue/runtime-core" {
  /*export interface ComponentCustomOptions {
    beforeRouteEnter?: NavigationGuardWithThis<undefined>;
    beforeRouteUpdate?: NavigationGuard;
    beforeRouteLeave?: NavigationGuard;
  }*/

  export interface ComponentCustomProperties {
    $route: RouteLocationNormalizedLoaded;
    $router: Router;
  }
}

Edit: forget the workaround... This will break Vue completely...

I will open a new issue in vue-router-next repo to fix there definition

[Shinigami92]

@rrrodzilla @craignicol In 3.0.0-alpha.7 there is now also a createGtm function that is exported
Could you also try this one and report any issues?

import { createGtm } from 'vue-gtm';

app.use(createGtm({
  id: ...
}));

[Shinigami92]

Cause I released 3.0.0 for vue 3, I will close this issue now