How to use it in Astro project (The requested module 'vue-router/auto-routes' does not provide an export named 'routes')

[kathirr007]

Hi,

I am trying to create a starter project with Astro which includes Vue and React integrations.

I am able to integrate and use React and Vue components without any issue.

Then I was trying to use Vue router as in normal Vue SPA it works fine with manual routes generation with router object and normal configuration. But when I was trying to use [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) to generate routes automatically with files structure, I'm getting the below error:

[ERROR] [vite] The requested module 'vue-router/auto-routes' does not provide an export named 'routes'

Actually as you can see in the screenshot the routes are generated and all the type declarations also generated.

Have anyone tried to use it in Astro project?

Please help me to fix the issue.

Here is the reproduction repository:
https://github.com/kathirr007/astro-vue-spa-starter

If I'm not using the auto generated routes, but manually created routes like below vue-router works fine:

Note:

It works fine with manual routes array.
Same configuration works fine in normal vue app.

[kathirr007]

This is what showing in the browser.

[kathirr007]

Hi,

Is anyone tried the setup to resolve the issue?

[kathirr007]

Fixed it by updating main.ts like below:

No change in astro.config.mjs

Instead of importing name import routes from vue-router/auto-routes, I've imported all of them as universal import.