[Vuejs]-Vue.js and structuring multi-page web apps – component registrations

by

0👍

you can use vue-cli to structure you project (https://github.com/vuejs/vue-cli) which is now a release candidate version and integrates webpack by default. With the command “vue create my-project” you will see a nice scaffolding of your project. In the main.js you would only put you root component.
Sorry for the bad formatting I am on mobile.

👤dnhyde

0👍

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

👤Gaurav Koley

0👍

You can use Vue CLI create and merge to your MVC Core project. In vue.config.js, define different entry to generate js file for each page that uses its own Vue instance. See below

//**
//vue.config.js
//
module.exports = {
    outputDir: './dist',
    filenameHashing: false,
    lintOnSave: false,

chainWebpack: config => {
        config.optimization
              .splitChunks(false);

        //output: ./dist/js/page1.js
        config.entry("page1")
              .add('./src/pages/page1/main.vue'); 

        //output: ./dist/js/page1.js
        config.entry("page2")
              .add('./src/pages/page2/main.vue');
}
//**
///src/page1/main.vue
//
import Vue from 'vue'
import HomeIndex from './components/home/Index.vue';
import HomeCreate from './components/home/Create.vue';

Vue.component("home-index", HomeIndex);
Vue.component("home-create", HomeCreate);

window.Vue = Vue;   //make Vue available to page


//**
//view/page1.html
//
...

<div id="app">
  ...
  <home-index />
  ...
  <home-create />
  ...
</div>
<script src="dist/js/page1.js"></script>
<script>
    new Vue({
      el: "#app",
      data: { ... }
      ...
     });

</script>
...
👤Jim Zhao

Leave a comment