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!