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
– Boussadjra Brahim, Commented Nov 13, 2018 at 16:43

Sergeon · Accepted Answer · 2018-11-13 17:45:14Z

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, 2018 at 17:45

answered Nov 13, 2018 at 16:57

Sergeon

6,7982 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Otto Over a year ago

Thanks, I have implemented your explanation, but I am getting a new error, please check the code above!

Otto Over a year ago

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..

Sergeon Over a year ago

Well, what errors do you see in the browser console? Are you using the vue devtools? github.com/vuejs/vue-devtools

Otto Over a year ago

@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.

Sergeon Over a year ago

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?

|

Jns · Accepted Answer · 2018-11-13 17:01:28Z

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, 2018 at 17:01

Jns

3,2871 gold badge20 silver badges25 bronze badges

3 Comments

Otto Over a year ago

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

Jns Over a year ago

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

Otto Over a year ago

Then how come it isnt working? is the <script tag not linking the main.js file correctly?

Collectives™ on Stack Overflow

Setting up Vue.js with Vuex

2 Answers 2

For the original question

For the question edition

10 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

For the original question

For the question edition

10 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related