What's The Best Way To Debug Vue.js SPA

Question

I'm currently working on a Single Page Application (SPA) using Vue.js . I'm loading all the node packages through NPM and Browserify.

What is really annoying is that if I code incorrectly or forget a bracket, the whole script simply does not work and is broken with no error message at all. I've tried using firebug but since it is a SPA thru Browserify it will generate no error at all.

Is there a way to generate an error compiling message like PHP that will tell me how to debug the script?

Answer 1

If this is just about syntax, as you mentioned forgetting a bracket etc, you can use eslint as well, which will show error messages in console, for all syntax errors including styling errors as well, like indentation, However you can disable those rules if you want.

Here is the config, you have to put in webpack config to enable this:

module: {
  preLoaders: [
    {
      test: /\.vue$/,
      loader: 'eslint',
      include: projectRoot,
      exclude: /node_modules/
    },
    {
      test: /\.js$/,
      loader: 'eslint',
      include: projectRoot,
      exclude: /node_modules/
    }
  ],