Menu
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:
And the extension is definitely installed and enabled:
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?
606
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.
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.
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
