Rules to avoid unpleasant composable problems
npm install @scayle/eslint-plugin-vue-composable
When writing Vue 3 composables with async operations,
it's easy to accidentally lose the component context after an await statement.
This happens because the current instance is tracked and can become undefined after asynchronous operations.
For example, this code has a subtle bug:
``js
export const useExample = async () => {
const data = await fetchData()
// ❌ This can cause errors because component context might be lost
const count = ref(0)
onMounted(() => {
console.log('mounted')
})
return { count }
}
`
This ESLint plugin catches these issues at development time,
preventing runtime errors and reactivity bugs that are difficult to debug in production.
You'll need to install ESLint along with this package:
`bashUsing pnpm
pnpm add --dev eslint @scayle/eslint-plugin-vue-composable
Usage
Add
@scayle/eslint-plugin-vue-composable to the plugins section of your .eslintrc configuration file.`json
{
"plugins": [
"@scayle/vue-composable"
]
}
`Then configure the rules you want to use under the rules section.
`json
{
"rules": {
"@scayle/vue-composable/no-composable-after-await": "warn",
"@scayle/vue-composable/no-lifecycle-after-await": "error",
"@scayle/vue-composable/no-watch-after-await": "error",
"@scayle/vue-composable/no-computed-after-await": "error"
}
}
`Rules
| Name | Description |
| :------------------------------------------------------------------- | :-------------------------------------------------------------------------- |
| no-composable-after-await | disallow asynchronously called composable functions in composables |
| no-computed-after-await | disallow asynchronously registered
computed in composables |
| no-lifecycle-after-await | disallow asynchronously registered lifecycle hooks in composables |
| no-watch-after-await | disallow asynchronously registered watch and watchEffect` in composables |Licensed under the MIT License
SCAYLE is a full-featured e-commerce software solution that comes with flexible APIs.
Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.
Learn more about SCAYLE’s architecture and commerce modules in the Docs.