Wow, this is INSANE. I always use Nuxt for the file based routing, but I got a new job and they are using Vue for CSR, so this is the perfect solution. Hat off to the developers and thanks for the content
Honestly, even for single page apps I use Nuxt now. You can setup Nuxt to statically generate your app with the `ssr: false` property, and using `nuxt generate` instead of `nuxt build`. The plugin system, autoimports, etc, are all achievable with different Vue plugins, but it's just so nice that it just works out of the box with Nuxt.
the trade-off would be when writing guard, auth related, defining meta. because the route attribute (meta, name, etc.) is all over the place instead of in 1 file.
File based routing is NOT always the appropriate answer. For more complex apps with reusable components and tabbed architectures, you likely still want whatever.routes.ts files. Being able to just pass metadata helps. It avoids writing wrapper components around a reusable component.
agreed that file-based routing is not always the answer. would definePage from unplugin-vue-router be enough for passing that additional data onto routes? or you thinking of something more
@@LearnVue I honestly don't see the need. If I needed page based routing, I'm sure this plugin would be good. But there's nothing wrong with configuration based routing. You can do a lot more with it, and typically have more control. I get genuinely worried about people cargo culting from stuff like this, when the basic vue router will do the job.
@@LearnVue yes it would. with definePage you can provide anything you'd provide to a normal route declaration. You lost absolutely zero control. It's an auto include for the typed routes alone.
@@ehutch79 mean that's not inherent to Vue router, people are using frameworks like Vue while you could all this with vanilla JS and way more, it always comes down to convenience vs control, the tricky part is finding the sweet spot
I don't know. This looks quite nice if you have some simple routes. But I kinda can't imagine using this on complex routes with params and meta on large projects. I would maybe prefer the other way around an IDE add-on that generates a nice overview from a route file. Anyway thanks for the video.
Agree. But maybe we are not thinking straight. There are other ways to achieve things, like using a store for params and use definePage on the page component. A 404 would be also, as well as redirects. Extends will help eventually..
I was just working with Vue app that used router when you released this video. Immediately switched to unplugin-vue-router and it works perfectly. Switch was painless.
Thanks for your videos! I want to switch to TypeScript in Vue, but I don't feel comfortable yet. From what I've seen, there are multiple ways to write some TS features in Vue. In addition, the Vue team is also updating some TS features this year. That's why I'm not sure which TS features are best practice. I guess some are still in beta or might get optimized in the next months. A video would be awesome about how to properly use TypeScript in Vue (with props, emits, computed, watch, ..., all the important stuff).
As it stands, Vue 3.3 typescript support is excellent. The biggest issue I can think of was the lack of generics for component props. I'm not sure what areas you've been concerned about, but typing refs, props, emits, etc. have all worked for a long time, even in the templates.
One thing I don't understand, what does Nuxt do that Vue + Vite cannot? What's the point with Nuxt? Is it the bleedinge-edge version of Vue where they add all the good features there?
Nuxt was born by the need of good and type safe SSR (Server Side Rendering). I always want to go deeper into things, so I wanted to learn how SSR was made, so went into the SSR docs in both Vite and Vue pages, and ultimately understood why Nuxt was created. It was like the next logical step. Now Nuxt is also backend! You can use Nuxt as backend only, frontend only or both! I'm testing and reporting bugs the Session API (like express-session) and so far so good. Next is the authentication, authorization, strategies, etc. (it's in the roadmap). So yes, we can say Nuxt is the Vue version with all the good stuff hahaha. Long time ago I don't use pure Vue projects. It's all Nuxt now, with Quasar as UI library. With plugins we can port to desktop (electron), mobile (cordova/capacitor) (I tried it!). Quasar still don't have auto pages/layouts/components/modules importing, so we would have to install and configure all these dependencies (unplugin-vue-router, vite-plugin-vue-layouts, unplugin-auto-import, and the components one, can't remember!) but the author promises they will work on it. So in the meantime, I can't use Quasar + Vite CLI, so I use Nuxt and import Quasar as UI dependency with the aid of the nuxt-quasar-ui module.
Because the samosa crack has been removed from the v vase which previously was a real bowl wine glass Now the router bit can etch anything on any flat piece of wood 😂
Already mentioned that Nuxt is probably the best way to go, but if you are "stuck" with Vue only, this is a great tool. Maybe I missed it in the video, but it's important to not that unplugin-vue-router is developed by Eduardo (posva), the same person who is the creator of vue-router
@@LearnVue Yep, but had to rewatch it. Been using Nuxt for too long now to need this, but it's very useful. I am glad to be sponsoring his work and would encourage anyone else to consider it as well.
@@LearnVue Yup. I think file based routing looks good until we are adding some complex syntax to it. IMO those should stay and configured in the code. Not to mention changing the file name messes with git history
Is it possible to have typesafety with routes but still use router.ts, I don't like file based router, it quickly becomes a mess with lot of routes, your editor is full of opened "index.", and it makes translations of routes basically impossible 😐
github.com/posva/unplugin-vue-router#typescript - it creates types at runtime so i _think_ you should be able to use extendRoutes if needed? let me know if you find something else though
Can you tell my if I can use this plug-in without typescript? I just started coding about 4 monts ago, front-end developer course, and I used vue router for the first time with my latest project. I don't use ts but can I still ues the new router plug-in? I think my last comment disappeared
You can use the following packages for auto layouts/pages-routes/components/modules importing: unplugin-vue-router, vite-plugin-vue-layouts, unplugin-auto-import, and the components one, can't remember! But you will quickly notice the boilerplate and energy/time spent in configuring these and finally realizing Nuxt 3 has all this built-in. :)
Lol one more " WOW LOOK AT THIS AMAZING" youtuber... File based routing is only one more way to do. If you have complex app with a lot of reusable components it is not your way. And you need go to comments to get this information. Because youtubers can only "WOW" "LOOK AT THIS" "IT'S AMAZING". Nahhh IT youtube is a big trash can...
Wow, this is INSANE. I always use Nuxt for the file based routing, but I got a new job and they are using Vue for CSR, so this is the perfect solution.
Hat off to the developers and thanks for the content
glad it helps!
Honestly, even for single page apps I use Nuxt now. You can setup Nuxt to statically generate your app with the `ssr: false` property, and using `nuxt generate` instead of `nuxt build`.
The plugin system, autoimports, etc, are all achievable with different Vue plugins, but it's just so nice that it just works out of the box with Nuxt.
i've been thinking about this too...i wonder if that's going to start to be something we see more of.
the trade-off would be when writing guard, auth related, defining meta. because the route attribute (meta, name, etc.) is all over the place instead of in 1 file.
File based routing is NOT always the appropriate answer.
For more complex apps with reusable components and tabbed architectures, you likely still want whatever.routes.ts files. Being able to just pass metadata helps. It avoids writing wrapper components around a reusable component.
agreed that file-based routing is not always the answer.
would definePage from unplugin-vue-router be enough for passing that additional data onto routes? or you thinking of something more
@@LearnVue I honestly don't see the need.
If I needed page based routing, I'm sure this plugin would be good.
But there's nothing wrong with configuration based routing. You can do a lot more with it, and typically have more control. I get genuinely worried about people cargo culting from stuff like this, when the basic vue router will do the job.
@@LearnVue yes it would. with definePage you can provide anything you'd provide to a normal route declaration. You lost absolutely zero control. It's an auto include for the typed routes alone.
@@ehutch79 mean that's not inherent to Vue router, people are using frameworks like Vue while you could all this with vanilla JS and way more, it always comes down to convenience vs control, the tricky part is finding the sweet spot
I don't know.
This looks quite nice if you have some simple routes.
But I kinda can't imagine using this on complex routes with params and meta on large projects.
I would maybe prefer the other way around an IDE add-on that generates a nice overview from a route file.
Anyway thanks for the video.
Agree. But maybe we are not thinking straight. There are other ways to achieve things, like using a store for params and use definePage on the page component. A 404 would be also, as well as redirects.
Extends will help eventually..
I was just working with Vue app that used router when you released this video. Immediately switched to unplugin-vue-router and it works perfectly. Switch was painless.
forgot to mention this in the video, but unplugin-vue-router is made by eduardo (vue-router/core team)...so the experience is sure to be good lol
@@LearnVue yeah, the great @posva
Such a great addition! Soo good to see you back making videos again too.
Your videos are always amazing, short, concise and full of practical knowledge
How do you use the same component for different routes? Wrappers?
Thanks for your videos!
I want to switch to TypeScript in Vue, but I don't feel comfortable yet. From what I've seen, there are multiple ways to write some TS features in Vue. In addition, the Vue team is also updating some TS features this year. That's why I'm not sure which TS features are best practice. I guess some are still in beta or might get optimized in the next months.
A video would be awesome about how to properly use TypeScript in Vue (with props, emits, computed, watch, ..., all the important stuff).
i've been meaning too for a while - i'll see what i can come up with (that's not too long of a video)
As it stands, Vue 3.3 typescript support is excellent. The biggest issue I can think of was the lack of generics for component props. I'm not sure what areas you've been concerned about, but typing refs, props, emits, etc. have all worked for a long time, even in the templates.
Finally! Thank you for posting, i was missing your videos
thanks for watching!
One thing I don't understand, what does Nuxt do that Vue + Vite cannot? What's the point with Nuxt? Is it the bleedinge-edge version of Vue where they add all the good features there?
SSR
TS support
Dev tools
The experience is just better
i might have to make a full video on this.
@@LearnVue Yes please
@@danielochoja8507 Thanks, so my assumption was correct?
Nuxt was born by the need of good and type safe SSR (Server Side Rendering). I always want to go deeper into things, so I wanted to learn how SSR was made, so went into the SSR docs in both Vite and Vue pages, and ultimately understood why Nuxt was created. It was like the next logical step.
Now Nuxt is also backend! You can use Nuxt as backend only, frontend only or both!
I'm testing and reporting bugs the Session API (like express-session) and so far so good.
Next is the authentication, authorization, strategies, etc. (it's in the roadmap).
So yes, we can say Nuxt is the Vue version with all the good stuff hahaha.
Long time ago I don't use pure Vue projects. It's all Nuxt now, with Quasar as UI library.
With plugins we can port to desktop (electron), mobile (cordova/capacitor) (I tried it!).
Quasar still don't have auto pages/layouts/components/modules importing, so we would have to install and configure all these dependencies (unplugin-vue-router, vite-plugin-vue-layouts, unplugin-auto-import, and the components one, can't remember!) but the author promises they will work on it. So in the meantime, I can't use Quasar + Vite CLI, so I use Nuxt and import Quasar as UI dependency with the aid of the nuxt-quasar-ui module.
Always a banger as usual, thank you learnvue for the info.
you bet :)
Because the samosa crack has been removed from the v vase which previously was a real bowl wine glass
Now the router bit can etch anything on any flat piece of wood 😂
My one and only Vue content creator. My feed is usually packed with React. Which is kinda sad because I don't even know React.
trying to represent for the vue community
@@LearnVue Thank you!!! 💚
Already mentioned that Nuxt is probably the best way to go, but if you are "stuck" with Vue only, this is a great tool. Maybe I missed it in the video, but it's important to not that unplugin-vue-router is developed by Eduardo (posva), the same person who is the creator of vue-router
facts, have you seen his vue.js london talk about it?
@@LearnVue Yep, but had to rewatch it. Been using Nuxt for too long now to need this, but it's very useful. I am glad to be sponsoring his work and would encourage anyone else to consider it as well.
The syntax in file name scares me. Honestly I would personally prefer the traditional vue routing approach
fair enough, do you think the wildcard/param syntax in a router.ts file makes more sense?
@@LearnVue Yup. I think file based routing looks good until we are adding some complex syntax to it. IMO those should stay and configured in the code. Not to mention changing the file name messes with git history
Is it possible to have typesafety with routes but still use router.ts, I don't like file based router, it quickly becomes a mess with lot of routes, your editor is full of opened "index.", and it makes translations of routes basically impossible 😐
github.com/posva/unplugin-vue-router#typescript - it creates types at runtime so i _think_ you should be able to use extendRoutes if needed? let me know if you find something else though
This is awesome! Hey what IDE are you using?
someone knows the name of the font? it’s so pretty
Can you tell my if I can use this plug-in without typescript? I just started coding about 4 monts ago, front-end developer course, and I used vue router for the first time with my latest project. I don't use ts but can I still ues the new router plug-in? I think my last comment disappeared
If you really hate someone, teach them to recognize bad kerning
keming you mean?
What i love about current usage is using the name of the route so i don't Care what's the URL is
How to use meta option route if use this plugin?
Interesting. the cons of this approach might developer need to learn how file based config works even they don't need SSR.
yeah, learning either the advanced router.ts config (wildcard matchers, etc.) or the file-based naming standards
Dynamic import seems like a better solution. I've never been a fan file base routing
What is your editor theme?
Anyone else getting Cannot find module 'vue-router/auto'
Yeah
Ty for the video! Very good news!
No problem!
This is really really great , useful , thank you for sharing it and thank you for your great video/content
so now we have a lot of files only for the slags that is too bad practice
how about layouts ?
You can use the following packages for auto layouts/pages-routes/components/modules importing: unplugin-vue-router, vite-plugin-vue-layouts, unplugin-auto-import, and the components one, can't remember!
But you will quickly notice the boilerplate and energy/time spent in configuring these and finally realizing Nuxt 3 has all this built-in. :)
@@angelhdzdev thanks
This looks amazing BUT use special characters on filenames is not good idea in my opinion.
i use Ziggy because fullstack 😭
any reason for that over nuxt?
vue-router/auto give me an error
Yeah same!
Nuxt can be used for client-side rendered app too 🤦♂️ Why do people keep using that excuse...
nuxt who?
nuxt what?
deez nuxt?
WTH I am never leaving the vue space.
No, thanks.... don't think is an advancement.
Cool. But I‘ll stick to vite-plugin-pages. See no big reason to switch now..
i like both, but the typed routes are pretty helpful imo
Lol one more " WOW LOOK AT THIS AMAZING" youtuber... File based routing is only one more way to do. If you have complex app with a lot of reusable components it is not your way. And you need go to comments to get this information. Because youtubers can only "WOW" "LOOK AT THIS" "IT'S AMAZING". Nahhh IT youtube is a big trash can...
Yeeehaaaa :D :D :D
We get rid of file based routing circa 2006.... please don't bring that shit back!
i got some bad news for you :/
Just use N....
just use nuxt fr fr
Does nuxt uses this under the hood or is that a port of what Nuxt did to 'non-nuxt' envs?
yup it uses it for the experimental typed pages (github.com/nuxt/nuxt/pull/20367/files)