nuxt-composables

Create reusable Nuxt 4 composables with Composition API state patterns.

2|1|Updated Mar 16, 2026

Search Tags:#typescript #vue #patterns #state-management #composables #nuxt #composition-api

Ready to run

npx skills add https://github.com/omakei/adonisjs-architecture-skill --skill nuxt-composables

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nuxt-composables
Source: https://github.com/omakei/adonisjs-architecture-skill/tree/main/nuxt/skills/nuxt-composables
Command: npx skills add https://github.com/omakei/adonisjs-architecture-skill --skill nuxt-composables

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Creating reusable Vue Composition API patterns to manage shared and component-local state within Nuxt apps.

Core Features & Use Cases

Singleton pattern for shared state across components
Factory pattern for fresh, isolated state per consumer
SSR-safe state management using useState
Composables with dependencies and cleanup
Provide/inject patterns for scoped state sharing
Real-world examples: sharing user data across pages and components

Quick Start

Create a reusable Nuxt composable that exposes a stateful value and actions, and import it into two components to demonstrate shared vs fresh state.

Frequently Asked Questions about nuxt-composables

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I share stateful logic across components in Nuxt?▼

Share stateful logic across Nuxt components by building reusable Composition API patterns like singleton or factory composables that encapsulate behavior and expose state to consumers.

What is the best way to manage SSR-safe shared state in Nuxt 4?▼

To manage SSR-safe shared state in Nuxt 4, use the built-in useState pattern within custom composables to ensure your application state hydrates correctly on the server and client without conflicts.

How do I create isolated state per component instance using Vue Composition API?▼

Create isolated state per component instance using the factory pattern in your Vue Composition API composable, returning a fresh state object on each call rather than sharing a singleton reference across consumers.

Can I use provide and inject for scoped state sharing in Nuxt composables?▼

Yes, you can use provide and inject within Nuxt composables to share scoped state across specific component trees, allowing descendants to access dependencies without prop drilling or global singletons.

How do composables handle dependencies and cleanup in Nuxt applications?▼

Composables handle dependencies and cleanup in Nuxt applications by accepting arguments for injection and leveraging component lifecycle hooks to automatically unregister side effects when the host component unmounts.