Setting up Vue.js with Vuex

Question

I am trying to combine vue with vuex. However there is an error, I am unable to link my main.js to and my app const to my index.html.

My set up is:

main.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from 'routes.js'
import HelloWorld from './components/HelloWorld.vue'

Vue.use(VueRouter)
Vue.config.productionTip = false

const router = new VueRouter({
  routes // short for `routes: routes`
})

new Vue({ // eslint-disable-line no-unused-vars
  el: '#app',
  router,
  components: {
    HelloWorld
  }
})

routes.js:

import HelloWorld from './components/HelloWorld.vue'

export const routes = [
  {
    path: '/',
    component: HelloWorld,
    name: 'Hello'
  }
]

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue-example</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <router-link :to="{ name: 'Hello' }">Home</router-link>
      <router-view></router-view>
    </div>
  </body>
</html>

<script src="./src/main.js"></script>

My new error:

it's a eslint error, to fix it add this `window.vue_app=app;` — Boussadjra Brahim, Nov 13 '18 at 16:43

Sergeon · Answer 1 · 2018-11-13T17:45:14.247

3

For the original question

As said in a comment, that is an eslint error. You much likely setup your project with the vue-cli, which by default ships your project with an eslint configuration. Eslint is a tool that checks your code to prevent some kind of errors.

In your case, in main.js, you're doing:

const app = new Vue({
  el: '#app',
  router,
  components: {
    HelloWorld
  }
})

When you assing to an app variable, but you don't do anything with that variable. Eslint complains about that -since, well, having unused vars usually is due to an human error and is a mistake-.

You can just skip the variable assignation, and just:

new Vue({
  el: '#app',
  router,
  components: {
    HelloWorld
  }
})

Without the app variable.

or you can add a comment in the line before, like:

// eslint-disable-next-line no-unused-vars
new Vue({
  el: '#app',
  router,
  components: {
    HelloWorld
  }
})

Your issue, as far as I know, has nothing to do with vuex.

Also, if you really want to use app in any other part of your application, just add:

export default app at the end of the main.js file. This will fix this error too, since now you're actually doing something with the app variable.

Some tips:

You can setup any editor to work with eslint. So the editor itself (like vscode) will give you visual feedback when you violate some eslint rules. Also will setup the comments to ignore eslint rules in specific lines if you want to.
You can configure eslint behavior by adding an .eslintrc configuration file to your project. In your particular case, I think is a good thing that eslint forbid you to compile that code (unused vars are misleading at best), but sometimes you may not want to follow some eslint rules, depending upon your code style and many considerations.

For the question edition

Now that you fixed the previous eslint error, you're getting a new one: do not use new for side effects

This eslint rule, again, usually makes some sense: new calls are intended to return an object, so you technically should not use new without assigning the result to a variable.

However, the Vue api actually do that, so you need to ignore eslint this time:

// eslint-disable-next-line no-new
new Vue({
  el: '#app',
  router,
  components: {
    HelloWorld
  }
})

This should do the trick. To understand how you can use comments to disable specific eslint rules, this answer helps a lot.

edited Nov 13 '18 at 17:45

answered Nov 13 '18 at 16:57

Sergeon

6,638
2
23
43

Thanks, I have implemented your explanation, but I am getting a new error, please check the code above! – Otto Nov 13 '18 at 17:26
Thanks! Now the error is gone, however somehow my index.html is not updating with the vue component.. The routerview doesnt seem to be picking up anything.. – Otto Nov 13 '18 at 18:02
Well, what errors do you see in the browser console? Are you using the vue devtools? https://github.com/vuejs/vue-devtools – Sergeon Nov 13 '18 at 18:04
@Sergeon I am using the chrome addon, so I can see it, however it is saying that Vue isnt even enabled for the index.html page. – Otto Nov 13 '18 at 18:07
And how are you launching the page? With `npm run dev` or something? I believe you simply messed something up when configuring the project for the first time, maybe trying to solve the `eslint` issue, and now it does not even compile. If you try the 'npm run lint' or 'npm run build` commands on the terminal, what is the output? – Sergeon Nov 13 '18 at 18:09
I am building with `npm run serve`, the `npm run lint` has no errors. `npm run build` has no errors. – Otto Nov 13 '18 at 18:11
I'm really surprised about that. Usually, when creating a project with vue-cli, you have this comment: ' '. You, however, are adding a `script` tag **outside** the html. Maybe you should place your script within the `body` tag, right at the end. But I'm not really sure if this is related with your issue or not. – Sergeon Nov 13 '18 at 18:15
@Sergeon Yeah i tried moving into the body tag, nothing interesting happened. I am fairly confused too. – Otto Nov 13 '18 at 18:18
If you didn't added much code of your own yet, I think the easiest thing maybe is to generate a new vue-cli project and start from scratch. – Sergeon Nov 13 '18 at 18:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/183582/discussion-between-otto-and-sergeon). – Otto Nov 13 '18 at 18:21

score 1 · Answer 2 · answered Nov 13 '18 at 17:01

1

This is an eslint rule . It prevents you from creating variables that you never use. To disable this rule for this specific line just write:

const app = new Vue({ // eslint-disable-line no-unused-vars
  el: '#app',
  router,
  components: {
    HelloWorld
  }
})

To disable this rule for your whole project just create a file (if it does not already exist) in your main project directory called .eslintrc.js

module.exports = {
  rules: {
  'no-unused-vars': 0 //or false,
  }
}

Or you just do not assign your vue instance to a variable:

new Vue({
      el: '#app',
      router,
      components: {
        HelloWorld
     }
})

answered Nov 13 '18 at 17:01

Jns

3,189
1
18
23

Thanks, but how does my index.html know I want to use the `const app`. Because the link between `div id="app"` and vue is missing..? My helloworld.vue is never displayed on index.html – Otto Nov 13 '18 at 17:43
The link isn't missing. In your main.js file you have your vue instance defined - the `el: #app` links your vue to the html – Jns Nov 13 '18 at 17:52
Then how come it isnt working? is the ` – Otto Nov 13 '18 at 17:54

Setting up Vue.js with Vuex

2 Answers2

For the original question

For the question edition