They Just Fixed VUE ROUTER

RESOURCES
untyped-vue-router docs - github.com/pos...
vite-plugin-pages - github.com/han...
✅ Join the LearnVue+ Waiting List - learnvue.co
Get early access to videos, exclusive content, interactive code challenges, and more.
follow me on twitter:
/ mattmaribojoc
#vuejs #vue #javascript #webdev

[@ralacerda12]

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

[@LearnVue]

glad it helps!

[@notkamui9749]

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.

[@LearnVue]

i've been thinking about this too...i wonder if that's going to start to be something we see more of.

[@MrIqbalTawakkal]

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.

[@sebastianderien5823]

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.

[@Tarabass]

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..

[@ehutch79]

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.

[@LearnVue]

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

[@ehutch79]

@@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.

[@darialyphia]

@@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.

[@heroe1486]

​​@@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

[@slava_trushkin]

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.

[@LearnVue]

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

[@ojvribeiro]

@@LearnVue yeah, the great @posva

[@Shulkerkiste]

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).

[@LearnVue]

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)

[@soviut303]

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.

[@MagareLosho]

How do you use the same component for different routes? Wrappers?

[@pavelino17]

Your videos are always amazing, short, concise and full of practical knowledge

[@ZyncInteractive]

Such a great addition! Soo good to see you back making videos again too.

[@Dragon-Slay3r]

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 😂

[@faridnugraha1266]

How to use meta option route if use this plugin?

[@mikopiko]

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?

[@danielochoja8507]

SSR TS support Dev tools The experience is just better

[@LearnVue]

i might have to make a full video on this.

[@mikopiko]

@@LearnVue Yes please

[@mikopiko]

@@danielochoja8507 Thanks, so my assumption was correct?

[@AngelHdzMultimedia]

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.

[@ZeldriFR]

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 😐

[@LearnVue]

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

[@allan_archie]

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.

[@LearnVue]

trying to represent for the vue community

[@AngelHdzMultimedia]

@@LearnVue Thank you!!! 💚

[@olatunjiolakunle6908]

Always a banger as usual, thank you learnvue for the info.

[@LearnVue]

you bet :)

[@chaddicusthegreat]

This is awesome! Hey what IDE are you using?

[@gabrielserejo8379]

Finally! Thank you for posting, i was missing your videos

[@LearnVue]

thanks for watching!

[@mathnewph]

What i love about current usage is using the name of the route so i don't Care what's the URL is

[@korigamik]

What is your editor theme?

[@desdev0l]

The syntax in file name scares me. Honestly I would personally prefer the traditional vue routing approach

[@LearnVue]

fair enough, do you think the wildcard/param syntax in a router.ts file makes more sense?

[@desdev0l]

@@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

[@danteDeveloper]

Interesting. the cons of this approach might developer need to learn how file based config works even they don't need SSR.

[@LearnVue]

yeah, learning either the advanced router.ts config (wildcard matchers, etc.) or the file-based naming standards

[@matthewpulls441]

Anyone else getting Cannot find module 'vue-router/auto'

[@p-townhero]

Yeah

[@mrleblanc]

Nuxt can be used for client-side rendered app too 🤦‍♂️ Why do people keep using that excuse...

[@ibnu7942]

i use Ziggy because fullstack 😭

[@LearnVue]

any reason for that over nuxt?

[@ricko13]

nuxt who?

[@LearnVue]

nuxt what?

[@TheDeprecatedLibrarian]

deez nuxt?

[@justafreak15able]

WTH I am never leaving the vue space.

[@virgiliustancu9293]

No, thanks.... don't think is an advancement.

[@DominikGanic]

Cool. But I‘ll stick to vite-plugin-pages. See no big reason to switch now..

[@LearnVue]

i like both, but the typed routes are pretty helpful imo

[@chikenmacnugget]

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...

[@hansmaulwurf9051]

If you really hate someone, teach them to recognize bad kerning

[@milos018]

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]

facts, have you seen his vue.js london talk about it?

[@milos018]

@@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.

[@caiovinicius2718]

Ty for the video! Very good news!

[@LearnVue]

No problem!

[@Danny_Front-end_Developer]

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

[@salahiddinediouri280]

This is really really great , useful , thank you for sharing it and thank you for your great video/content

[@calimio6]

Dynamic import seems like a better solution. I've never been a fan file base routing

[@EdwardDev]

This looks amazing BUT use special characters on filenames is not good idea in my opinion.

[@yossefalatter2160]

vue-router/auto give me an error

[@p-townhero]

Yeah same!

[@kamal_balayev]

Yeeehaaaa :D :D :D

[@AIZEN155]

Just use N....

[@gluten2537]

how about layouts ?

[@AngelHdzMultimedia]

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. :)

[@gluten2537]

@@AngelHdzMultimedia thanks

[@johnysmrz]

We get rid of file based routing circa 2006.... please don't bring that shit back!

[@LearnVue]

i got some bad news for you :/

[@RaphaelDDL]

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?

[@LearnVue]

yup it uses it for the experimental typed pages (github.com/nuxt/nuxt/pull/20367/files)