How to make ESLint understand that function is used in vue pug template?

Question

I have following vue component.

<template lang="pug">
button(@click="onLogout") Logout
</template>

<script setup lang="ts">
function onLogout() {
  // some logic
}
</script>

When I run linter. Linter complains Warning:(9, 10) ESLint: 'onLogout' is defined but never used. (@typescript-eslint/no-unused-vars)

How do I make ESLint aware that onLogout function is used in the template?

Pollinosis

Answer 1

you can use eslint-plugin-vue-pug. This plugin extends eslint-plugin-vue to support pug templates. After installing you must add the plugin to your eslint config:

module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:vue-pug/vue3-recommended'
  ]
}

The plugin only supports pug syntax that directly corresponds to html syntax. Some more details you can find on the description of rule no-pug-control-flow.

Cavein

Do you know if this only works with Vue3? I tried to add plugin:vue-pug/strongly-recommended and it didn't seem to work. – Slither

it works well with my vue3 project! – Arlberg