typescript - Augmenting global properties without removing vue-router augmentations - Stack Overflow

admin管理员组

文章数量:1335584

I am developing two plugins that will be used by multiple vue apps. One adds the global property $routes and the other one $auth.

I want the vue apps that use the plugins to know the types of said properties, but when I add them they override vue-router's augmentations ($router and $route), which is not what I want. The added types for both plugins work fine (so it's not like they are overriding each other).

The packages and apps are in a turborepo, referring to each other internally (i.e. @repo/auth-vue), and therefore referred in the apps in their package json as "@repo/auth-vue": "workspace:*"

Finally, they are installed like standard vue plugins (with their install functions) in the main.ts file (I have included otther plugins in case it adds relevant context)

const app = createApp({
  setup() {
    provide(ApolloClients, clients);
  },
  render: () => h(App),
});

app.use(i18n);
app.use(pinia);
app.use(router); // Normal vue-router
app.use(authManager); // This is the custom plugin installation

I checked the generated .d.ts types for both plugins and they have what I would expect after rollup (of course, other types are declared above)

// dist/routes-plugin.d.ts
...
export { }


declare module 'vue' {
    interface ComponentCustomProperties {
        $routes: RouteRecordRaw[];
    }
}


// dist/auth-plugin.d.ts
...
export { }


declare module 'vue' {
    interface ComponentCustomProperties {
        $auth: AuthManager;
    }
}

Any idea on what I should do to make sure that vue-router's (and any other plugin) augmentations are persisted when I used my plugins?

thank you for any guidance!

本文标签： typescriptAugmenting global properties without removing vuerouter augmentationsStack Overflow