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

Answer 1

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