I am migrating a monolithic vue3-repository into a nx-monorepo.
Before migrating to a monorepo, I had set up my vite.config.ts to auto-import all my vue-components from src/components with 'unplugin-vue-components'.
Then I outsourced all components from src/components/pr/* into a nx-lib, to use them in other projects as well, resulting in following structure:
- apps:
- main
- libs:
- pr-components
I then updated my main's vite.config.ts to now auto-import the components from the new lib as well. But unfortunately serving the application does not work, Vite gets stuck and does not reply to requests for resources anymore.
My vite.config.ts before migrating:
// vite.config.ts
import Components from 'unplugin-vue-components/vite'
// ...
export default defineConfig(({ mode }) => {
// ....
const config = {
plugins: [
//...
Components({
// allow auto load markdown components under `./src/components/`
extensions: ['vue', 'md'],
// allow auto import and register components used in markdown
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
dts: 'src/components.d.ts',
}),
]
}
return config
})
My new vite.config.ts in the main-app of the nx-repo:
// main's vite.config.ts
import Components from 'unplugin-vue-components/vite'
// ...
export default defineConfig(({ mode }) => {
// ....
const config = {
plugins: [
//...
Components({
// allow auto load markdown components under `./src/components/`
extensions: ['vue', 'md'], // allow auto import and register components used in markdown
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
dts: 'src/components.d.ts',
dirs: [
path.resolve(__dirname, 'src/components'),
path.resolve(__dirname, '../../libs/pr-components/src/components'),
]
}),
]
}
return config
})
I can confirm that unplugin-vue-components does find the Components in the new path (Vite logs messages, if it finds duplicate component-names for example), but is not evaluating them correctly.
Thus making Vite serve the application does not work, but results in Vite getting stuck, not loading requests for resources anymore.
There's a similar post here, but with a slightly different intention: Using unplugin-vue-components in a monorepo
Has anyone successfully achieved a similar setup?