Closed rrrodzilla closed 3 years ago
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.
Need to look into this later @craignicol If you already have a working draft, please open a PR :)
edit: nevermind ^^ overlooked #96
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
https://github.com/mib200/vue-gtm/blob/828d437eecfdbf086c576d7c16a604f341ea5479/src/index.js#L85
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 :(
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 :warning:
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
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
@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 :thinking:
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.
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
(https://github.com/vuejs/vue-router-next/issues/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
@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: ...
}));
Cause I released 3.0.0 for vue 3, I will close this issue now
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