Multipage Application VueJs

Question

Hi!
I'm currently building a large scale VueJs Application and would like to set it up as a Multipage Application, where I have two different Sections (Admin + User), that I would like to load independently, yet share some Components and Services. How would I go about building this sort of Architecture, any Help would be appreciated.

Setting up multiple Webpack Entries as described here: (https://github.com/Plortinus/vue-multiple-pages) works for me but the Problem I'm now encountering is the Authentification since the Vuex Store is deleted on reload/redirect.

Did anyone come across this Problem in the Past? Thanks in Advance

You should store the state in localStorage: there are already VueX plugins out there that does that for you, to ensure persistance of state during navigation. — Terry
– Terry, Commented Aug 22, 2017 at 14:29
As Terry said, you need to store the Vue app related data (state) in the client-side. I suggest you to use vuex-persistedstate if the question still relevant somehow. — ozanmuyes
– ozanmuyes, Commented Jan 19, 2018 at 0:07

Gaurav Koley · Accepted Answer · 2019-02-06 07:07:45Z

I built a large scale Multipage VueJs application using Ruby on Rails for the Multipage part and sprinkling vue to make things interactive.

What you can do is initialize a Vue app on certain parts of the page by wrapping them up in a container of sorts and then do the same for all the pages that need Vue components.

I do it this way, I have a container class called vue-container which wraps my components calls like this:

<div class="vue-container">
  <floating-menu></floating-menu>
  <show-pdf :resource="<%= @resource.as_json(current_user: current_user) %>"></show-pdf>
</div>

Here floating-menu and show-pdf are two Vue componenents.

Then, in my app.js file which is imported for all the pages, I have the following code:

if(window.vueapp == null){
  window.vueapp = []
}
if(window.vueapp != null){
  for(var i=0, len=vueapp.length; i < len; i++){
    vueapp[i].$destroy();
  }
  window.vueapp = []
}
var myNodeList = document.querySelectorAll('.vue-container');
forEach(myNodeList, function (index, element) {
  if (element != null) {
    var vueapp = new Vue({
      el: element,
      store,
      components: {
        ShowPdf, FloatingMenu
      }
    })
    window.vueapp.push(vueapp);
  }
});

This creates and initializes a Vue app on every .vue-container element and everything works!

If you need to share data among the different components, any of the standard data sharing techniques like an Event Bus or Vuex would work just fine.

I wrote a blog post detailing this setup: https://blog.koley.in/2018/vue-components-in-multi-page-apps

Collectives™ on Stack Overflow

Multipage Application VueJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related