"Failed to resolve component: router-view" - compatibility with Vite

[akauppi]

Trying out Vite (a week old tool for building buildless Vue components) took me to Vue 3 beta and vue-router-next.

I am currently facing this:

Failed to resolve component: router-view

Not sure whether it's due to Vue 3 beta or something Vite specific. Decided to open this issue in order to gather discussions, if others are facing something similar.

My code base is at: https://github.com/akauppi/GroundLevel-es6-firebase-web/tree/vite-maybe

Use the vite-maybe branch.

[vue-bot]

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!

[akauppi]

note: this is likely my own making.

[NickMcBurney]

@akauppi did you manage to resolve the issue?

[ggayowsky]

This problem seemed to be related to not calling use on the application instance with the Router.

In order to fix this issue, I needed to change my main.js file to be

const app = createApp(App);
app.use(router);
app.mount('#app');

[posva]

I have an example with Vite and tailwind at https://github.com/posva/vite-tailwind-starter. It might help people trying to scaffold projects

[thedb]

app.use(router) must before then app.mount('#app')

[prakashkumarbhanja]

yes, to solve this issue u should maintain this line of cod structure in main.js file. const app = createApp(App); app.use(router); app.mount('#app');

[phpjscoding]

maybe you just forgot to include this code in router/index.js : const router = createRouter({ history: createWebHistory(), routes, })

[cdll]

same issue here with vite-plugin-ssr

[hyang-gi]

const app = createApp(App); app.use(router); app.mount('#app');

On making this change, I'm seeing an error: Uncaught TypeError: Cannot destructure property 'options' of '(0 , vue__WEBPACK_IMPORTED_MODULE_1__.inject)(...)' as it is undefined.

[linzhilin125]

app.use(router) 必须在那之前 app.mount('#app') Thank you so much

[hakan07ant]

maybe use in router.js export default { router }; to => ( export default router; )

[oleksandr-dukhovnyy]

maybe you just forgot to include this code in router/index.js : const router = createRouter({ history: createWebHistory(), routes, })

Thanks! Its solved my problem!

vue: ^3.2.45
vue-router: ^4.1.6
vite: ^4.0.0

Why they don`t creating error in console - is a question.