title: Making my Vue instance global when using Browserify so the developer tools are available
body: <p>I'm starting to learn a bunch of new-to-me front end tools, specifically Vue.js, Gulp, Node, Babel, and Browserify.</p>
  
  <p>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.</p>
  
  <p>In my gulpfile I have a task for bundling the javascript app:</p>
  
  <pre><code>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'));
  });
  </code></pre>
  
  <p>And in my <code>app.js</code> file, I instantiate my Vue instance like this:</p>
  
  <pre><code>var Vue = require('vue');
  
  Vue({
      el: '#app',
      data:{
          message: 'Worked!!!'
      }
  });
  </code></pre>
  
  <p>And as a test the relevant html look like this in <code>index.html</code>:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="app"&gt;
          &lt;h1&gt;{{ message }}&lt;/h1&gt;
          &lt;input v-model='message'&gt;&lt;/input&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript" src="javascript/bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/uRG1K.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uRG1K.png" alt="Missing dev tools in browser"></a></p>
  
  <p>And the extension is definitely installed and enabled:</p>
  
  <p><a href="https://i.stack.imgur.com/kfMFZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kfMFZ.png" alt="vue devtools extension installed"></a></p>
  
  <p>I've been searching around for a solution and have seen posts where people say to assign Vue to the <code>window</code> or <code>global</code> objects, but that binds the Vue library, not my particular instance. </p>
  
  <p>Is there a way of making my Vue instance global? Am I misunderstanding how this should work?</p>