@scayle/eslint-plugin-vue-composable

@scayle/eslint-plugin-vue-composable

Website

An ESLint plugin that enforces Vue 3 Composition API best practices by detecting composables, lifecycle hooks, watchers, and computed properties called after async operations. Prevents subtle reactivity bugs caused by losing component context after await statements.

Why use this plugin?

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:

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.

Installation

You'll need to install ESLint along with this package:

# Using pnpm
pnpm add --dev eslint @scayle/eslint-plugin-vue-composable

# Using yarn
yarn add --dev eslint @scayle/eslint-plugin-vue-composable

# Using npm
npm install --save-dev eslint @scayle/eslint-plugin-vue-composable

Usage

Use the plugin with ESLint flat config (e.g. eslint.config.mjs). Import the plugin and add it to your config:

import vueComposable from '@scayle/eslint-plugin-vue-composable'

export default [
  {
    plugins: {
      '@scayle/vue-composable': vueComposable,
    },
    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

License

Licensed under the MIT License

What is SCAYLE?

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.

Other channels

• LinkedIn
• Jobs