vuejs application with different layouts (e.g. login layout, page layout, signup etc.)

vue.js vue-router
user2343398 picture user2343398 · Jun 15, 2016 · Viewed 49.2k times · Source

I generated a project using vue-cli. I see project has one App.vue which is kinda main layout of the app - if I'm not mistaken. Here I put my basic HTML layout and <router-view></router-view>. Now the issue is that I need completely different layout for login (different wrappers , body has different classes) but I can't change it since App.vue has template which is kinda "fixed" as a layout. How to approach this issue? Is there recommended way?

Should I create new component that represents layout so in that case my App.vue template would only have <router-view></router-view> and then LoginLayout.vue would be included into it?

Answer

user2343398 picture user2343398 · Jun 16, 2016

I think I found a solution. The approach has App.vue containing only <router-view></router-view> and then including different components that represent layout (if needed, containing <router-view> and subroutes). I found a project using it in that way here.

I think it keeps things more clean and organised. IMHO, hiding all elements which define layout structure (all the divs) would be too messy - especially for bigger apps.

Related questions

Vue.js redirection to another page

I'd like to make a redirection in Vue.js similar to the vanilla javascript window.location.href = 'some_url' How could I achieve this in Vue.js?

Read More
How can I get query parameters from a URL in Vue.js?

How can I fetch query parameters in Vue.js? E.g. http://somesite.com?test=yay. Can’t find a way to fetch or do I need to use pure JS or some library for this?

Read More
How to add external JS scripts to VueJS Components

I've to use two external scripts for the payment gateways. Right now both are put in the index.html file. However, I don't want to load these files at the beginning itself. The payment gateway is needed only in when …

Read More