Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Making my Vue instance global when using Browserify so the developer tools are available

I'm starting to learn a bunch of new-to-me front end tools, specifically Vue.js, Gulp, Node, Babel, and Browserify.

I've got it all working, but I'm running into an issue where the Vue instance I'm creating for my application is not global and because of that (I'm assuming) I lose access to my browser's Vue devtools.

In my gulpfile I have a task for bundling the javascript app:

gulp.task('build-js', function (){
    return browserify('src/javascript/app.js')
        .transform(babelify, { presets: ['es2015'] })
        .bundle()
        .on('error', function (e){
            console.log(e.message);
            this.emit('end');
        })
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('public/javascript'));
});

And in my app.js file, I instantiate my Vue instance like this:

var Vue = require('vue');

Vue({
    el: '#app',
    data:{
        message: 'Worked!!!'
    }
});

And as a test the relevant html look like this in index.html:

<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <input v-model='message'></input>
    </div>
    <script type="text/javascript" src="javascript/bundle.js"></script>
</body>

The code works; I can type into my bound input object and see the result mirrored in the heading, but I don't have access to the Vue devtools:

Missing dev tools in browser

And the extension is definitely installed and enabled:

vue devtools extension installed

I've been searching around for a solution and have seen posts where people say to assign Vue to the window or global objects, but that binds the Vue library, not my particular instance.

Is there a way of making my Vue instance global? Am I misunderstanding how this should work?

like image 606
Chris Schmitz Avatar asked Jan 23 '16 19:01

Chris Schmitz


People also ask

Where is Vue installed?

Vue can be installed directly on Windows or on the Windows Subsystem for Linux (WSL). We generally recommend that you install Vue on WSL if you are planning to interact with a NodeJS backend, want parity with a Linux production server, or plan to follow along with a tutorial that utilizes Bash commands.


1 Answers

If you assign the created vue instance to window object it should work:

var vm = new Vue({
    el: '#app',
    data:{
        message: 'Worked!!!'
    }
});

window.vue = vm

As for vue devtools I am not sure how they are activated for a particular vue instance, so far I've used them with vue router and they work out of the box.

like image 84
TiagoLr Avatar answered Nov 14 '22 22:11

TiagoLr