[Vuejs]-How to not use multiple Vue's instances

by

0👍

Sure you can do that no problem. I use an approach which is exactly like what you are asking for. I’m a c# developer not a php developer but every backend system has some way to create a template that is used by most of the web pages in the system. That template is typically used to hold the markup for the header and footer of the site for example. In ASP.NET Core that file is called _layout.cshtml. No doubt your php framework has a similar concept and file. It will be named something else, but it’s purpose will be the same.

I mention this because such a file is the perfect place to "new up" your vue instance so that it will be available to all pages since all the pages are including the content from that template anyway to get their header and footer html.

So that solves the first part of your question. The next part is how then does the individual page add additional methods and data to the vue instance? The best way is through a vue mixin. When vue is instantiated, you can specify an array of mixins that should be merged into the vue instance. All the data, methods, watches, etc are merged from the mixin into the vue instance. Official docs are here: https://v2.vuejs.org/v2/guide/mixins.html

The basic structure is like this:

Place in your template where it will run early before the page specific javascript runs:

 var mixinList = [];

Place on the specific page:

 var pageMixin = {
        data: function () {
            return {
                 someData: 'someValue'
            }
         },
        methods: {
             someMethod:function(someParam) {
                 //does work
             }
         }
 }

 mixinList.push(pageMixin);

Place in the layout where it will run after the page specific javascript has ran:

 var app = new Vue({
        el: '#appTemplate',
        mixins: mixinList,                 //This is what includes the mixins in the vue instance
        data:{
       
        },
         methods: {
             aMethod:function(aParam) {
                 //does work
             }
         }
 });

I also wrote about this approach in this StackOverflow Answer: Why is mixing Razor Pages and VueJs a bad thing?

**This code could have syntax errors given that I’m typing much of it from memory, but I use similar code every day on my project. If you have any issues let me know.

-1👍

It is definitely not a good idea to have multiple vue instances.
To have multiple pages, you should use Vue router.

Having one Vue instance will allow you to share plugin used between your components.

Your main js file where you will be able to define associates a router and a store (you may not need it if you don’t need to share a lot of data between components) to your vue instance :

import App from './App'
import router from './router'
import store from './store'

// Plugins shared
Vue.use(Vuelidate)
Vue.use(BootstrapVue)

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App },
})

Your App component (root component) :

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'app',
  }
</script>

<style lang="scss">
@import "./scss/variables";
@import "./scss/colors";

#app {
  position: relative;
  padding-top: $full-page-top-padding-xl;
  min-height: 100vh;
}
</style>

Your routes :

import Vue from 'vue';
import Router from 'vue-router';
import Page1 from '@/Page1';
import Page2 from '@/Page2';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/mypage1',
      name: 'Page1',
      component: Page1,
    },
{
      path: '/mypage2',
      name: 'Page2',
      component: Page2,
    }
...

Leave a comment