vue-router useRouter doesn't work when building library components

Question

I am building a Vue3 npm component library with hopes that I could access the current router with vue-router's useRouter, and it would be automatically provided by whatever vue app is importing my library components.

If my library components are referenced directly import myCompThatUsesRouter from '../../myCompThatUsesRouter.vue the router works.

If I reference the same component via the node_module package import myCompThatUsesRouter from '@myPackage' router is undefined.

I also get a vue warning

injection "Symbol()" not found.

Is this not how these inject methods are intended to work?

Answer 1

The issue was that my library defined vue-router as a "dependency", not a "peerDependency". https://nodejs.org/es/blog/npm/peer-dependencies/

Also my vite config needed to define vue-router as "external"

vite.config.ts

rollupOptions: {
   external: ['vue', 'vue-router']
}