@scayle/eslint-plugin-vue-composable

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