Eslint-plugin-vue: {variable} is defined but never used (no-unused-vars)

Created on 1 Jan 2020 · 3Comments · Source: vuejs/eslint-plugin-vue

Tell us about your environment
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
Node version: v8.16.1

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    node: true,
    jest: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'max-len': 'off',
    'no-shadow': ['error', { 'allow': ['state'] }],
    'camelcase': ['error', { 'ignoreDestructuring': true, properties: 'never' }],
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        jest: true,
      },
    },
  ],
};

What did you do?

<template>
    <div">
        <span> {{ formatTitle(title) }} </span>
    </div>
</template>

<script>
import { formatTitle } from '@/utilities/helperFunctions';
export default {
    name: 'myAwesomeComponent',
    data() {
        return {
            title: 'this is AN Unformatted TitlE',
        }
    }
}
</script>

What did you expect to happen?
I want to not get any error sicne I'm importing function and using it directly on template part.

What actually happened?

ERROR Failed to compile with 1 errors 17:49:36
error in ./src/components/CartDropdown.vue
Module Error (from ./node_modules/eslint-loader/index.js):
error: 'formatTitle' is defined but never used (no-unused-vars) at src/components/myAwesomeComponent.vue:26:10:
24 |
25 |

All 3 comments

your code is invalid and this rule correctly report on this.

[Vue warn]: Error in render: "TypeError: _vm.formatTitle is not a function"

your code should look like this....

<template>
  <div>
    <span>{{ formatTitle(title) }}</span>
  </div>
</template>

<script>
import { formatTitle } from "@/utilities/helperFunctions";
export default {
  name: "myAwesomeComponent",
  data() {
    return {
      title: "this is AN Unformatted TitlE"
    };
  },
  methods: {
    formatTitle: formatTitle
  }
};
</script>

Template has no access to imported functions/objects and so on, you have to expose them from component.

armano2 on 1 Jan 2020

👍1

Hi,
Thanks for replying.
I actually wanted to not have to do that, and bypass it, but it's very good to know it's necessary. Thanks and Happy New Year!

rodrigoabb on 1 Jan 2020

🚀2

A little hack to make multiple helper functions like this available in your templates and not having to specify each one separately, you can use the spread operator like this:

<script>
import * as helpers from "@/utilities/helperFunctions"
import { formatTitle } from "@/utilities/helperFunctions" // if you also need it in your script

export default {
  name: "myAwesomeComponent",
  data() {
    return {
      title: "this is AN Unformatted TitlE"
    };
  },
  methods: {
    ...helpers
  }
}
</script>