Is it possible to use both Vue.js components as well as conventional Vue instances in an application?

Question

I currently have a Laravel application that is using Vue.js as the frontend JavaScript framework. For the large scripts I am using components but for smaller scripts I wish to just use a Vue instance in the blade template.

The problem I have is that the app.js configuration I currently I have to make one way work breaks the other way and vice versa.

require('./bootstrap');

window.Vue = require('vue');


Vue.component('repairs', require('./components/repairs.vue'));
Vue.component('repair-show', require('./components/repair-show.vue'));

const app = new Vue({
    el: '#app'
});

The above works components, the below works for creating an instance.

require('./bootstrap');

window.Vue = require('vue');


Vue.component('repairs', require('./components/repairs.vue'));
Vue.component('repair-show', require('./components/repair-show.vue'));

I understand why this wouldnt work for both with the components exporting to the global Vue instance I was just wondering if there was another way of configuring to make both ways work.

For your reference I have an example of one of the Vue scripts in the Vue component.

import axios from 'axios';

var csrf_token = $('meta[name="csrf-token"]').attr('content');

    export default {

        created() {
            this.blocks = JSON.parse(this.b);
            this.contractors = JSON.parse(this.c);
            this.token = csrf_token;
        },
        props: ['b', 'c'],

        data(){

            return {

              blocks: '',
              blockSelected: '',
              units: '',
              token: '',

            }
        },

        methods: {
          getUnits: function(){

            var self = this;

            axios.post('/getrepairsUnit', {
                    blockSelected: this.blockSelected,

                })
                .then(function(response) {

                    self.units = response.data;

                })
                .catch(function(error) {
                    console.log(error);
                });

          },
        }
    }

And an example of my Vue instance...

  <script>
  var app = new Vue({
    el: '#app',
    data: {
      deposit: 0
    }
  });
  </script>

The error I get when trying to run the Vue instance is the following:

[Vue warn]: Property or method "deposit" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in root instance)

I am able to console log out so is working somewhat but the view doesnt pick up the data. This however does work if I remove the global instance in the app.js file.

Thank you

craig_h craig_h · Accepted Answer · 2017-09-20T10:31:19

You cannot have two view models in the same page element (i.e. two Vue instances), if you want to use different vue instance you will need to create different JavaScript bundles for each instance, or simply add a Vue instance in the blade template and don't include the app.js.

Is it possible to use both Vue.js components as well as conventional Vue instances in an application?

2 Answers