Registry / testing / eslint-plugin-vue-composable

eslint-plugin-vue-composable

JSON →
library1.0.0jsnpmunverified

This ESLint plugin provides a set of rules specifically designed to enforce best practices and prevent common pitfalls when working with Vue 3 composables and lifecycle hooks. It ensures that composable functions (prefixed with `use`) and lifecycle hook calls (like `onMounted`, `onBeforeUnmount`, etc.) are correctly placed within `setup()` functions, other composables, or Vue's `<script setup>` block. The plugin, currently at version 1.0.0, aims to help developers maintain proper reactivity contexts and avoid issues like calling hooks or composables after `await` expressions in incorrect scopes. It supports both modern ESLint flat configurations (`eslint.config.js`) and legacy `.eslintrc` formats, providing flexibility for different project setups. Its release cadence is likely tied to the evolving best practices for Vue composables, offering focused linting compared to general Vue ESLint plugins.

testing
package ↗
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

Primarily used for ESLint flat configurations (eslint.config.js). The CommonJS `require` form may lead to issues or incorrect configuration loading in modern setups expecting ESM.

import vueComposable from 'eslint-plugin-vue-composable'

This is the recommended way to integrate with ESLint flat configurations, providing a baseline of rules for composables.

import vueComposable from 'eslint-plugin-vue-composable'; export default [...vueComposable.configs['flat/recommended']]

For projects using the legacy `.eslintrc` configuration format, the plugin is enabled via the 'extends' property with a string identifier, not a direct import.

{ "extends": ["plugin:vue-composable/recommended"] }

Demonstrates how to configure `eslint-plugin-vue-composable` using the modern ESLint flat configuration (`eslint.config.js`), including how to apply recommended rules and override specific rule severities.

import vueComposable from 'eslint-plugin-vue-composable' export default [ // Ensure ESLint is configured for Vue and TypeScript if applicable // For example: // ...require('@eslint/js').configs.recommended, // ...pluginVue.configs['flat/recommended'], // ...parserTs.configs.recommended, // Add the vue-composable recommended rules ...vueComposable.configs['flat/recommended'], // You can override specific rules or add custom configurations { rules: { 'vue-composable/lifecycle-placement': 'warn', // Change severity of a specific rule 'vue-composable/composable-placement': 'error' // Enforce composable placement strictly } }, // Define files to lint { files: ['**/*.vue', '**/*.ts', '**/*.js'], languageOptions: { parserOptions: { ecmaVersion: 'latest', sourceType: 'module' } } } ]
Debug
Known footguns
gotchaIncorrect placement of composable functions or lifecycle hooks can lead to reactivity issues or unintended behavior. Rules like `composable-placement` and `lifecycle-placement` explicitly warn against calling them after `await` expressions outside of `<script setup>`.
gotchaMixing ESLint's legacy (`.eslintrc`) and flat (`eslint.config.js`) configuration formats can cause rules to not be applied correctly or lead to parsing errors. This plugin provides distinct setup instructions for each.
gotchaCalling composable functions or lifecycle hooks within regular, non-composable JavaScript functions (i.e., functions not starting with `use` or not directly `setup()`) will trigger linting errors for rules like `composable-placement` and `lifecycle-placement`.
Upgrade
Version history

Breaking-change detection hasn't run for this library yet.

Audit
Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity
10 hits · last 30 days
gptbot
4
ahrefsbot
4
script
1
googlebot
1
Resources
packagehttps://www.npmjs.com/package/eslint-plugin-vue-composable ↗