They Just Fixed VUE ROUTER
Вставка
- Опубліковано 17 лип 2023
- RESOURCES
untyped-vue-router docs - github.com/posva/unplugin-vue...
vite-plugin-pages - github.com/hannoeru/vite-plug...
✅ 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 - Наука та технологія
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.
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..
Such a great addition! Soo good to see you back making videos again too.
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
Your videos are always amazing, short, concise and full of practical knowledge
How do you use the same component for different routes? Wrappers?
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
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.
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
This is awesome! Hey what IDE are you using?
Finally! Thank you for posting, i was missing your videos
thanks for watching!
This is really really great , useful , thank you for sharing it and thank you for your great video/content
Always a banger as usual, thank you learnvue for the info.
you bet :)
How to use meta option route if use this plugin?
What is your editor theme?
Ty for the video! Very good news!
No problem!
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.
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!!! 💚
Anyone else getting Cannot find module 'vue-router/auto'
Yeah
What i love about current usage is using the name of the route so i don't Care what's the URL is
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.
Dynamic import seems like a better solution. I've never been a fan file base routing
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
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
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. :)
@@AngelHdzMultimedia thanks
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 😂
Yeeehaaaa :D :D :D
i use Ziggy because fullstack 😭
any reason for that over nuxt?
vue-router/auto give me an error
Yeah same!
This looks amazing BUT use special characters on filenames is not good idea in my opinion.
WTH I am never leaving the vue space.
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
If you really hate someone, teach them to recognize bad kerning
nuxt who?
nuxt what?
deez nuxt?
Nuxt can be used for client-side rendered app too 🤦♂️ Why do people keep using that excuse...
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
No, thanks.... don't think is an advancement.
We get rid of file based routing circa 2006.... please don't bring that shit back!
i got some bad news for you :/
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...
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)