3

I am trying to build the front-end of my back-end application using VueJS and I am stuck with managing components and views of my app. I have a full page login view which shows the company logo on 50% of the screen and the login form on the next 50% of the screen. The HTML differs in the login and the protected area of the app and so does the CSS and js files. enter image description here

Now I am trying to hide the navigation bar which is on the left side, whenever the login route is matched with login but somehow I think this is not the correct way to do it. Also is there a better way to manage all this and can I use more than one <router-view> in the same VueJS project. It would be great to have some best practices and suggestions.

Update

I solved this problem on my own. However a developer has posted a full tutorial on how you can do it to. Please refer to the below link. It is almost how I did it.

Medium Article to Solve Layout Issue in SPA

Viral Patel
  • 485
  • 1
  • 5
  • 11
  • 1
    I'd suggest to use vuex + persistent data for that matter: something like: `isLogged: !!localStorage.getItem('token')`. There are good libraries out there like *vue-auth* also: https://github.com/websanova/vue-auth/blob/master/docs/StepByStepGuide.md – Paul Melero Oct 14 '17 at 10:29
  • I have used the method you suggested, but I am still wondering if there are more options to use other than using a 3rd party library. Libraries are good, but I am making a demo application for my company staff to use it as a reference and we need them to be thorough with it. – Viral Patel Oct 16 '17 at 04:49
  • With that kind of project, I'd suggest the _vuex_ approach (e.g. http://www.eddyella.com/tag/vuejs-middleware/). But you can have a middleware in the router (_vuex_ free solution) like is explained in this article: https://forum.vuejs.org/t/how-to-set-up-a-global-middleware-or-a-route-guard-to-vue-router-js-help/7893/2 and define your routes – Paul Melero Oct 16 '17 at 17:34
  • @PaulMel : Will Vuex persist state on page refresh? I have never used vuex, so I am going to see more into that sir. Thank you. – Viral Patel Oct 17 '17 at 04:55
  • no, you will have to add your own logic for that. LocalStorage has great support. But keep in mind that storage is limited: https://stackoverflow.com/questions/2989284/what-is-the-max-size-of-localstorage-values There are different ways of applying this: plugins or a custom middleware. You could make an async one. – Paul Melero Oct 18 '17 at 08:57
  • if you want a quick solution: https://codepen.io/iamscottcox/pen/MpvbQB that is a great example for persisting data (it keeps the entire state) – Paul Melero Oct 18 '17 at 09:00

0 Answers0