Source: https://frameworkrecipes.dev/vue/subscription-lifecycle/

# Dispose Vue realtime subscriptions when the owner disappears

A component can disappear while its socket and callback remain alive. That leaks resources and can continue collecting one tenant’s events after the user navigates elsewhere. Pair acquisition with scope disposal and invalidate callbacks that were already queued.

Save this requirement in Perch and check it after each agent edit. The rule gives your agent a named check to run, a finding to repair, and the same command to recheck.

## Implement the Vue boundary

Save this illustrative integration module as `src/useOrderFeed.js`.

```
import { ref, onScopeDispose } from "vue";

export function useOrderFeed(connect) {
  const updates = ref([]);
  const connection = connect();
  let stopped = false;
  const unsubscribe = connection.subscribe(update => {
    if (!stopped) updates.value = [...updates.value, update];
  });
  onScopeDispose(() => {
    stopped = true;
    unsubscribe();
    connection.close();
  });
  return updates;
}
```

The order, inventory, or resource-lifetime scenario is adapted from Perch’s public [order-service source at commit 4af67af](https://github.com/lakeday-org/perch/blob/4af67af46d76ac99398d61c7ad0a45441760d4dc/test/fixtures/order-service/storage.py). This Vue implementation is an illustrative adaptation.

## Integrate with your application

Call useOrderFeed synchronously inside setup or another active effect scope. connect must return a connection owned exclusively by this composable, with subscribe returning an idempotent unsubscribe function. For a shared multiplexed socket, replace close with reference-counted release so one component does not disconnect others. Enforce tenant permissions in the realtime server, and reconnect under a new scope when identity changes.

## Exercise the boundary and failure paths

| Scenario | Expected outcome |
| --- | --- |
| Component remains mounted | Updates appended |
| Scope disposed | Unsubscribe and close called once |
| Queued update arrives after disposal | Ignored |
| Shared transport | Adapter releases only this ownership share |

Add regression tests for these cases in your existing Vue test project. Use separate connections or deliberately reordered completion where the case involves concurrency; a sequential happy-path test does not exercise that failure. Run the test command after creating the matching test file or suite:

```
npx vitest run src/useOrderFeed.test.js
```

The scenarios above specify tests to implement. A completed Perch source check below is separate from running these application integration tests.

## Introduce the specific agent regression

In a throwaway copy, replace this source span:

```
unsubscribe();
    connection.close();
```

with:

```
// Subscription and socket are accidentally retained.
```

Run the relevant negative test and the Perch command on that broken copy. Restore the corrected source before committing the application. The supplied mutation reproduces the exact regression for the rule check.

## Preserve the requirement as a Perch rule

Save this in `.perch/rules/perch-guide-vue-subscription-lifecycle.yaml` at the repository root, keeping your existing `perch.yaml`:

```
- name: feed-scope-disposes-resources
  where: "src/useOrderFeed.js"
  ensure: >-
    onScopeDispose must unsubscribe from the order feed and close the connection when the composable scope ends.
```

Install and authenticate the CLI once, then check the current working file:

```
npm install -g @lakeday/perch
perch login
perch check src/useOrderFeed.js --rules feed-scope-disposes-resources --json
```

Use Node 22 or newer. The framework can use another language; Perch’s CLI remains a Node command. A gated finding exits 3. Exits 1 or 2 mean the check did not complete and must be reported as a blocker.

## Inspect the captured rule check

On 2026-10-14, Perch using jev-latest checked the exact fixed and broken source provided here. The capture records SHA-256 hashes of both sources and the requirement.

| Source control | Exit | Outcome |
| --- | --- | --- |
| Broken | 3 | Rule finding |
| Corrected | 0 | No rule finding |

The rule distinguished these controls in this run. [Raw Perch capture](https://frameworkrecipes.dev/vue/subscription-lifecycle/capture.json) · [Exact sources and mutation](https://frameworkrecipes.dev/vue/subscription-lifecycle/source.json).

## Install the rule pack and configure your agent

[Download this rule pack ZIP](https://reporules.fyi/vue/subscription-lifecycle/rule-pack.zip) · [Download the YAML rules](https://reporules.fyi/vue/subscription-lifecycle/rules.yaml) · [Agent task](https://reporules.fyi/vue/subscription-lifecycle/agent-task.txt). The pack contains the rule, its example paths and the repair/recheck instructions. Review the `where` selector before using it in an existing project. Keep your root `perch.yaml`; install this rule as a separate file under `.perch/rules/`.

1. Install Perch using Node 22 or newer and sign in once:

```
npm install -g @lakeday/perch
perch login
```

1. Download the pack, inspect it, and extract it from your repository root. The extraction preserves any existing files:

```
curl -fL 'https://frameworkrecipes.dev/vue/subscription-lifecycle/rule-pack.zip' -o 'perch-guide-vue-subscription-lifecycle.zip'
unzip -n 'perch-guide-vue-subscription-lifecycle.zip'
```

The installed rule is `.perch/rules/perch-guide-vue-subscription-lifecycle.yaml`. Its selector matches `src/useOrderFeed.js` in this example; adapt the selector to your application file before checking an existing project.

1. Configure the coding agent you use. Run one of these commands:

Claude Code:

```
perch setup claude-code
```

Codex:

```
perch setup codex
```

Cursor:

```
perch setup cursor
```

Pi:

```
perch setup pi
```

1. Ask the agent to edit the implementation and check the saved requirement:

> Use the installed Perch skill while editing src/useOrderFeed.js. Preserve feed-scope-disposes-resources. Run perch check src/useOrderFeed.js --rules feed-scope-disposes-resources --json after the edit. Read each finding and the affected code, fix the implementation, and run the identical check again after the fix. Keep the rule and regression tests intact. Run the application's relevant regression tests and report the commands and actual results. Exit 3 means a rule finding; exit 1 or 2 means the check did not complete. Report an unavailable or incomplete check as blocked. Do not claim the application tests ran if only the Perch check ran.

1. After repairing a finding, run the same check again and inspect the result:

```
perch check src/useOrderFeed.js --rules feed-scope-disposes-resources --json
```

Commit the downloaded rule and the installed agent configuration with your application. The rule file adds no guarantee of correctness; keep the regression tests from this guide.

With the base reference fetched, use `perch scan --since origin/main --filter type=lint` in CI.

## Framework references and verification scope

- [vuejs.org reference](https://vuejs.org/api/reactivity-advanced.html#onscopedispose)

The dated capture records the source check shown above. Implement the adapters, schema and regression tests described in this guide in your application. Unchanged requests reuse cached answers; fresh model judgments can vary. Model analysis sends relevant source to the configured service.

**Framework Recipes**

Implementation, failure path, check.

Published by Perch · © 2026 Verglas LLC. Framework Recipes is a Perch publication.

Perch’s MIT license covers the CLI; hosted model analysis is a paid service. Relevant source is sent to the configured model service.

[Perch CLI MIT license](https://github.com/lakeday-org/perch/blob/main/LICENSE) · [Article text](https://frameworkrecipes.dev/vue/subscription-lifecycle/index.md) · [Resource index](https://frameworkrecipes.dev/llms.txt)