Vue.js "npm run build" but Vue.js not bound to DOM / working

Question

Newbie to Vue.js here. On Mac OS using versions:

$ npm --version
4.6.1
$ vue --version
2.8.1

I'm using the webpack-simple init with the vue-cli for vue 2.0. I've created a folder within my Django project folder for vue stuff called frontend. Directory structure:

$ tree 
├── README.md
├── asnew
│   ├── __init__.py
│   ├── migrations
│   ├── models.py
│   ├── settings.py
│   ├── templates
│       └── index.html
│   ├── urls.py
│   ├── views.py
│   ├── wsgi.py
├── frontend
│   ├── node_modules
│   ├── package.json
│   ├── src
│       ├── App.vue
│       ├── assets
│       ├── components
│       │   └── SearchPageResult.vue
│       ├── main.js
│       └── webpack.config.js
├── manage.py
├── media
├── requirements.txt
├── static
└── staticfiles

Then basically in my index.html Django template I have the following code:

<script src="{% static 'js/vue/build.js' %}"></script>
<div id="app"></div>

Once rendered this turns into the full path:

<script src="/static/js/vue/build.js"></script>

which I create with npm run build and I verified does actually get loaded/imported by the browser. I run the heroku CLI as the devserver.

I build like this:

$ cd frontend
$ npm run build

> [email protected] build /Users/me/MyProject/frontend
> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: d5e16854b8f88beea3e9
Version: webpack 2.4.1
Time: 4503ms
       Asset     Size  Chunks             Chunk Names
    build.js  87.4 kB       0  [emitted]  main
build.js.map   718 kB       0  [emitted]  main 

I don't know what to do with build.js.map, I don't use it.

HOWEVER, Vue doesn't work. While I get no errors with npm run build, I see no warnings in my console, none of my directives like v-bind work, nor can I access my object vm from main.js:

import Vue from 'vue'
import App from './App.vue'

# adding "export" in front here doesn't help either -
# in browser console it doesn't see `vm` object
const vm = new Vue({
    el: '#app',
    render: h => h(App)
});

as vm (or just Vue!) in the console.

> vm
VM1256:1 Uncaught ReferenceError: vm is not defined
> Vue
VM1256:1 Uncaught ReferenceError: Vue is not defined

My webpack.config.js looks like this:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../static/js/vue/'),
    publicPath: '/js/vue/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

and npm run build runs without error, so I'm not sure what's going on.

Any ideas?

Answer 1

npm run build usually also creates the index.html file, or in your case 'webpack-simple' its already present, in which it includes the app.js or build.js just before closing the body tag. If you are including build.js in your own html, try placing it after <div id="app"></div> and before closing the </body>.

Including scripts at the bottom ensures that the actual page content is loaded first; when the scripts are finally downloaded the content (DOM) will be ready for your scripts to manipulate.

Also if you:

const vm = new Vue({
    el: '#app',
    render: h => h(App)
});

you cannot access 'vm' in the console. Any variable created inside main.js won't be globally available. If you need it for debugging purposes you can do it in the following way:

window.vm = new Vue({
  el: '#app',
  render: h => h(App)
});

And then you can access 'vm' in the console.

Answer 2

As you can see in the index.html file of the webpack-simple template, you should include the scriptafter the <div id="app"> element:

https://github.com/vuejs-templates/webpack-simple/blob/master/template/index.html#L8-L9

The fact that there's no global Vueobject is to be expected since your bundles app doesn'T expose it (and shouldn't)