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

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?

vue.jspugeslinttypescript-eslint


Solution 1:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 RWAM

Related Questions