Global variable with vue instance not defined

Question

I'm defining the Vue.js instance like this in app.js:

const vm = new Vue({
    el: '#app',
    data: {
        page: 'welcome'
    }
});

and using Laravel's default webpack script:

mix.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');

Vue is loading correctly as the components are displaying and the Vue developer plugin is showing appropriate data.

However, in the developer console and in scripts on the page vm is not defined.
For instance on the page that is loading a Vue component

<script>
  console.log(vm); // Error: vm is not defined.
</script>

How do I access the Vue instance? I want to set a one of its data properties.

acdcjunior · Accepted Answer · 2018-03-17 02:15:49Z

3

To have flexibility and import with any name, you can use default exports.

In app.js:

export default new Vue({
    el: '#app',
    data: {
        page: 'welcome'
    }
});

In other .js files:

import whateverName from './app';

Naturally, adjusting the ./app depending on where the file is at.

answered Mar 17, 2018 at 2:15

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

I like your generalized answer better than mine.

Marshall Davis · Accepted Answer · 2018-03-17 02:00:24Z

3

I was able to use

export {
  vm
};

require('./main');

and in main.js

import {vm} from './app';

answered Mar 17, 2018 at 2:00

Marshall Davis

3,7006 gold badges41 silver badges49 bronze badges