Setting Up Vue 2.0 Routes - Don't Use New For Side Effects

Question

I am setting up a vue project. I used the webpack template. (npm install init webpack). I get 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 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

This error comes from eslint code formatting, not from Vue.js. itself.

Your webpack environment is configured to test the code before creating and running your application. In this case, eslint issues this warning.

To avoid this, do the following (in the last 5 lines of your main.js file):

 new Vue({ // eslint-disable-line no-new el: '#app', router: router, render: h => h(App) }) 

What you do above disables the eslint warning for new only in this line above. Your web package will now start your application normally.

Another option is to set the rule in .eslintrc.js (in the project root folder), where you can specify that the no-new rule should be ignored. (not recommended in this case)

Answer 2

You are not assigning a value to the new Vue(...) operator.

Operator

A new creates a new instance of the object. Usually this instance is assigned to a variable. If you do not assign an instance to a variable, then this garbage is collected.

Linter suggests that since you do not keep a link to a new instance, you rely on the side effect of the operation, and this is bad practice. An example of a side effect would be if the new operation changed the value of a global variable.

Answer 3

This ruler rule is useful and important. If you use any framework - for example, vue - that use a new effect from the operator’s side, try to cover up the anonymous function by adding three brackets

 (()=>code)(); 

in your code

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