Interestingly, the Vue.js documentation strongly recommends using the <script setup> syntax of the Composition API. The issue with this recommendation is that the documentation lacks depth and it conflicts with other tools (like eslint).
Here is an example of a component I have:
<template>
<div>
<h3>User List</h3>
<highup-table
data="{{users}}"
fields="{{tableFields}}"
/>
</div>
</template>
<script setup>
import {HTTPClient} from "@/services/HTTPClient"
import HighupTable from '@/components/table/HighupTable'
import { ref } from 'vue'
const users = ref([])
const tableFields = {
email: 'Email',
first_name: 'First Name',
last_name: 'Last Name',
username: 'Username'
}
users.value = await HTTPClient.getData('/user-manager/users').then(data => {
console.log(data);
return data.data;
})
</script>
<style scoped>
</style>
The dilemma I'm encountering is that eslint keeps giving warnings about the unused variable tableFields, even though it's being utilized as a prop value in the template.
I came across some articles suggesting that tweaking the eslint configuration could resolve this issue, but I'm not well-versed in that area and my project directory does not contain a .eslingrc.js file.
I'm debating whether to experiment with the eslint settings or simply disable eslint altogether. Any advice on how to proceed would be greatly appreciated.