↗
Resource profile / Pinia State & SSR Workflow
About this skill

Workflow & requirements

Pinia

Pinia is the official state management library for Vue, designed to be intuitive and type-safe. It supports both Options API and Composition API styles, with first-class TypeScript support and devtools integration.

The skill is based on Pinia v4.0.3, generated at 2026-09-25.

Core References

Topic Description Reference
Stores Defining stores, state, getters, actions, storeToRefs, subscriptions core-stores

Features

Extensibility

Topic Description Reference
Plugins Extend stores with custom properties, state, and behavior features-plugins

Composability

Topic Description Reference
Composables Using Vue composables within stores (VueUse, etc.) features-composables
Composing Stores Store-to-store communication, avoiding circular dependencies features-composing-stores

Best Practices

Topic Description Reference
Testing Unit testing with @pinia/testing, mocking, stubbing best-practices-testing
Outside Components Using stores in navigation guards, plugins, middlewares best-practices-outside-component

Advanced

Topic Description Reference
SSR Server-side rendering, state hydration advanced-ssr
Nuxt Nuxt integration, auto-imports, SSR best practices advanced-nuxt
HMR Hot module replacement for development advanced-hmr

Key Recommendations

  • Prefer Setup Stores for complex logic, composables, and watchers
  • Use storeToRefs() when destructuring state/getters to preserve reactivity
  • Actions can be destructured directly - they're bound to the store
  • Call stores inside functions not at module scope, especially for SSR
  • Add HMR support to each store for better development experience
  • Use @pinia/testing for component tests with mocked stores
PACKAGE TRANSPARENCY

Inspect before installing

Source: Anthony Fu · MIT · SHA-256 shown alongside the download.

16 files19936 ZIP bytes0 script/code files

License file included. A license and checksum are not a security certification. Review package instructions and scripts before running them.

View files and uncompressed sizes

An adaptation record is bundled. Inspect the declared changes and archived original before use. Review adaptation and original-file hashes →

Machine-readable installation guide →
CATALOG REVIEW NOTES

Know what you need before installing

Source and packaging checks recorded on 2026-10-03. These notes are not safety certification or measured task performance.

Requirements

A Vue/Pinia project and compatible dependencies. Optional Nuxt/testing tooling is separate. The SSR reference is adapted to pair devalue stringify with parse; review HTML embedding and request isolation in your own app.

Costs, access & practical limits

MIT skill material; separate tooling, hosting, dependencies and model access may have costs. No external tool or account is supplied. Full skill/agent runtime evaluation has not been performed. Independent documentation-derived proof-of-concept maintained by Anthony Fu; upstream says skill effectiveness has not been fully tested. Check matching framework and package versions. Preferences are not mandatory framework rules, and code samples may be separate alternatives rather than complete files. One SSR example pairs devalue stringify/parse instead of mixing old serialization and JSON.parse. Exact upstream reference is retained. Application-specific CSP, safe HTML embedding, hydration timing and per-request store isolation still require validation.

View the recorded checks
  • Pinned source bytes verified against Git blob hashes
  • Complete upstream MIT copyright and license retained
  • Core name/folder identity and packaged references checked
  • Publisher attribution, dependency and version limitations disclosed

Upstream commit: e53a142a2420e8cd812cfe9ed0484ab01bc856aa

Runtime status: not tested by this catalog. Configure your client and test the skill in your own environment.

SCENARIOS

Inputs, criteria and recorded outcomes

Records are supplied by the site administrator and bound to a specific package. They are not third-party safety certification. This page does not execute skills.

SSR serialization expressions: ten synthetic value checks

Reported passed · ve53a142a2420.bb1

View input and acceptance criteria

Input

Evaluate the exact packaged stringify and parse expressions with devalue 6.0.2 on synthetic objects, script delimiters, Dates, Maps, Sets, undefined, shared/cyclic references and rejected function/symbol values. Use no actual application state or account.

Acceptance criteria

Eight supported-value round trips match with no literal less-than character in serialized strings; function and symbol inputs are rejected. This covers expression behavior only, not a Pinia/Vue runtime, SSR server, CSP, HTML embedding implementation, browser hydration or full skill.

Recorded outcome

Ten synthetic assertions for the exact packaged stringify/parse expressions only. This does not execute Pinia, Vue, an SSR server, a browser hydration flow, HTML transport, CSP or a full agent workflow. Escaping observation is limited to the serialized string, not a complete HTML embedding implementation.
{
  "format": 1,
  "status": "passed",
  "executed_at": "2026-10-03T04:23:49.295737+00:00",
  "skill_slug": "antfu-pinia",
  "skill_version": "e53a142a2420.bb1",
  "package_sha256": "9a5bbf9727e0d831b2a6b1084bb1a8ec2aca572b3aa87800a491ec62a9e04de9",
  "reference_sha256": "37afdce4b3c04e4405f96d8021005806bba402b0a487ed8e608ccd5ef2ec65f1",
  "original_reference_sha256": "9fbc7b11da5cb7b1d4ef8b320935712ba3d356f7847344c56b01e80a3e1e3132",
  "probe_sha256": "ac859e37f0151f25150c7cb4111ab13a18b46b6ee9f56efe030f9df44a3c48ba",
  "dependency": {
    "name": "devalue",
    "version": "6.0.2",
    "tarball": "https://registry.npmjs.org/devalue/-/devalue-6.0.2.tgz",
    "integrity": "sha512-6V1HzU4to74skg//ScZR2mp9bdz+rESC9jQzVIIG/ha0HYgymHcXIQQCjH0+ivRaSuY82fa9fZ7Ro6QZT4s4uw==",
    "tarball_sha256": "6b2f879e48cbfc06bf3a99ec7c6b3ac13a2d6e59bdc96ead103316489cf14d2a",
    "license": "MIT"
  },
  "environment": "Windows; Node v24.10.0; local synthetic values; dependency downloaded with TLS/integrity validation; no npm installation hooks, provider account or application data",
  "scope": "Ten synthetic assertions for the exact packaged stringify/parse expressions only. This does not execute Pinia, Vue, an SSR server, a browser hydration flow, HTML transport, CSP or a full agent workflow. Escaping observation is limited to the serialized string, not a complete HTML embedding implementation.",
  "temporary_storage_removed": true,
  "fixtures": [
    {
      "case": "plain object",
      "assertion_matched": true,
      "string_transport_roundtrip": true,
      "no_literal_less_than": true
    },
    {
      "case": "script delimiters",
      "assertion_matched": true,
      "string_transport_roundtrip": true,
      "no_literal_less_than": true
    },
    {
      "case": "date",
      "assertion_matched": true,
      "string_transport_roundtrip": true,
      "no_literal_less_than": true
    },
    {
      "case": "map",
      "assertion_matched": true,
      "string_transport_roundtrip": true,
      "no_literal_less_than": true
    },
    {
      "case": "set",
      "assertion_matched": true,
      "string_transport_roundtrip": true,
      "no_literal_less_than": true
    },
    {
      "case": "undefined",
      "assertion_matched": true,
      "string_transport_roundtrip": true,
      "no_literal_less_than": true
    },
    {
      "case": "shared references",
      "assertion_matched": true,
      "string_transport_roundtrip": true,
      "no_literal_less_than": true
    },
    {
      "case": "cyclic references",
      "assertion_matched": true,
      "string_transport_roundtrip": true,
      "no_literal_less_than": true
    },
    {
      "case": "reject function",
      "assertion_matched": true,
      "rejected": true
    },
    {
      "case": "reject symbol",
      "assertion_matched": true,
      "rejected": true
    }
  ],
  "original_api_pair_observation": "A JavaScript expression from uneval is not JSON; JSON.parse rejected the synthetic expression. The adapted pair uses stringify/parse. No old-version devalue runtime or full Pinia app was run."
}

Environment

Windows; Node v24.10.0; local synthetic values; dependency downloaded with TLS/integrity validation; no npm installation hooks, provider account or application data

Package SHA-256: 9a5bbf9727e0d831b2a6b1084bb1a8ec2aca572b3aa87800a491ec62a9e04de9

Outcome recorded: 2026-10-03 04:23 UTC

Community reviews

★ New

Be the first to share your experience.

Sign in to leave a review →

More to explore

View all ↗