Vue 2.0 setting up routes - Do not use 'new' for side effects

Question

I am configuring a vue project. I used the webpack template. ( npm install init webpack ). I am getting an error in the terminal --

ERROR in ./src/main.js

✘  http://eslint.org/docs/rules/no-new  Do not use 'new' for side effects  
/Users/uz067252/Documents/Development/Vue/workex/vue-project/src/main.js:21:1
new Vue({
^


✘ 1 problem (1 error, 0 warnings)


Errors:
1  http://eslint.org/docs/rules/no-new

Here's the main.js

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

import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

// We want to apply VueResource and VueRouter
// to our Vue instance
Vue.use(VueResource)
Vue.use(VueRouter)

// Pointing routes to the components they should use
var router = new VueRouter({
routes: [
    { path: '/hello', component: Hello },
    { path: '*', redirect: '/hello' }
]
})

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

Thanks

Answer 1

You can also set a vm var and mount separately

var vm = new Vue({router, render: h => h(App)})
vm.$mount('#app')

ref : https://vuejs.org/v2/api/#vm-mount

Answer 2

This liner rule is useful and important. If you use any frameworks - for example Vue - that use the new operator side effect, wrap this in an anonymous function by adding three parentheses

(()=>code)();

in your code

(()=>new Vue({  // no linter directive need anymore
    el: '#app',
    router: router,
    render: h => h(App)
}))();