Webpack: http://eslint.org/docs/rules/no-unused-vars '<component>' is defined but never used

[Joshfindit]

Trying to turn a single HTML file in to a webpacked one.
Ran across this issue when separating out components

 ERROR  Failed to compile with 1 errors                                                                                                                                                         2:45:12 PM

 error  in ./src/App.vue


  ✘  http://eslint.org/docs/rules/no-unused-vars  'NodeList' is defined but never used  
  /root/vue-cli/src/App.vue:135:8
  import NodeList from './components/NodeList.vue'

NodeList.vue is simple (see below), and I'm using <node-list></node-list> in the App.vue template.

If it helps, there is a similar issue on the React side that was solved here with

Adding the following rule solved my issue:
"react/jsx-uses-vars": [2]
Thanks a lot @alberto

NodeList.vue

<template>
  <button class="ui basic button" v-on:click="getParentArtefactInfo( node.uuid )">
    {{ node.name }}
  </button>
</template>

<script>
export default {
  name: 'node-list',
  props: ['node'],
  methods: {
    getParentArtefactInfo: function (filename) {
      this.$root.getArtefactInfo(filename)
    }
  }
}
</script>

<style scoped>
</style>

comments that improve structure are welcome

[doorkey]

Exactly having the same issue - created a new single-file componenet and cannot import in the router.vue saying that the variable is defined but not used. Any directions guys?? Thanks :)

[erdiegoant]

Did you add your NodeList Component in the App component export? Like so:

export default {
  components: {
    NodeList
  },
  // Your code
}

[eric-burel]

Full edit : just to be more precise for Vue beginners like me, you need to register the imported components in the parent component that actually imports them (givem @erdiegoant answer I thought for a second you had to register all components in the App root...).