I'm currently working on a big Progressive Web App (PWA) for a client. For the frontend, we use VueJS with the Vue Router, VueX, and some more VueJ...
For further actions, you may consider blocking this person and/or reporting abuse
Interesting. I've thought about doing it the way you describe here, but then discovered you can also use parent routes with a blank path, which is far more explicit IMO, ie:
Now I'm curious to see if there's any performance benefits to switching. Will have to test!
I use a similar setup for my projects too.
But i tend to split my routes in 2 other files, then import them into the main router file.
that way it's easy to manage routing configuration without actually messing with the other parts of the app.
Yeah, in general, it is the same solution as the one I chose to go with.
I'm not sure if I like the empty path.
Also in our big app, we don't just have one router file.
We have a router file for each path.
For example
/someSite/would have its own router file with the paths for it likesomeSite/someSite/:idsomeSite/newetc.I would like to see the
createoutput for your solution :)Thank you for this solution! It is very neat and elegant. Has made my app a lot smoother.
I'm using Vue 3 along with router 4.0.0 for this and got it to work flawlessly when all the routes are in a single file but when I break the routes into separate files I am unable to get child routes to work with your layout method. Have you encountered this before?
I am currently doing the same . I have the same question as yours , are there any benefit switching the structure you mentioned with the one described in the blog?
You should simply create a reusable component with slot. Import it globally and just use it that way. You won't need to link specific layout on each view.
Something like this, depending on your design complexity.
Export default {
name: 'layoyt',
}
🤔🤔 and how does this support multiple different layouts?
Create few global components, apply different scss and you can have multiple layouts
I'm not sure if you have read the article.
It is about how to load that layouts not how you implement a single layout 🤔🤔🤔🤔
Does nuxt.js have the same problem?
I did not test nuxt.js
As far as I know, they have a layout system extra implemented for nuxt.js.
Would be nice to see how they are doing it.
You should definitely give nuxt a try.
It's built to take out all the hassle you're currently doing manually. :)
In nuxt you simply create a layout in the layout folder, and tell pages what layout to use. Done.
interesting article! thanks for writing this.
I'd just like to ask if there was any way to check on the performance gained by implementing things in this new method
Hey thank you :)
Sadly we did not compare before and after.
We needed to fix it fast since it was at the end of a sprint. I just wanted to solve the problems with the other implementations.
You could feel and see the performance from not beeing 30fps every was to having smooth animations with 30fps+ everywhere.
Also, I would need to ask if I can show these metrics in public since this project is for a client.
In general, if I see some performance issues in a small part of the app I use the performance tool from firefox or chrome and dig into the charts and output since you can see what caused what in detail.
wow, thank you for such a detailed response!
and yes, i can imagine the difference between < 30 fps and > 30fps being quite noticeable even without hard numbers :P
I think the simplest way to declare dynamic layout is in vue-router. Did you tested it? I always prefer to use children key of vue router to evaluate layouts for different dynamic pages
Nope I did not test it.
I'm just not the biggest fan of the notation.
It should be fine.
You would love it.
Hi sir. I am trying to built a multistep form wizard in vue.js using Django where I have two flows one is personal user and other one is business user. So in personal user I have to prompt a form based on category selection. Like when we enter a category in html input field based on that category I have to show next form. Suppose if I enter a "IT" in category field then based on IT i have prompt next form related with IT fields.
So here first flow I have completed like displaying the form based on category selection. And the main problem is with business user here while we enter a category "IT" in business flow so at that time by default we are having next form with two radio buttons one is personal user radio button and other is business user so if we click on business user radio button then user are able to update his account from personal to business using registration form.
But while we click on personal radio button then I need to follow the same process of entering category and showing the next form based on this category enter by user but i was unable to achieve this. So here i have stuck and need help
Pretty neat solution Michael! Thanks for sharing
Thank you for the informative article. One small thing though:
<component :is="this.$route.meta.layout || 'div'">❌<component :is="$route.meta.layout || 'div'">✔️Thank you Micheal for the post!
I was struggling with multiple rendering issue mentioned in 2nd solution and tried out your solution with meta object.
It worked like charm!
Crack