# Nuxt Components

> Vue component patterns with Composition API and script setup. Use when creating components, understanding script setup order convention, organizing component directories, or implementing component patterns like slideovers, modals, and tables.

- **Type:** Skill
- **Install:** `agentstack add skill-leeovery-agentic-skills-nuxt-components`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [leeovery](https://agentstack.voostack.com/s/leeovery)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [leeovery](https://github.com/leeovery)
- **Source:** https://github.com/leeovery/agentic-skills/tree/main/nuxt/skills/nuxt-components

## Install

```sh
agentstack add skill-leeovery-agentic-skills-nuxt-components
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Nuxt Components

Vue 3 Composition API components with standardized organization and patterns.

## Core Concepts

**[components.md](references/components.md)** - Script setup order, patterns, organization

**[design-system-primitives.md](references/design-system-primitives.md)** - Building semantic layout/typography primitives (Display, MonoLabel, SectionMarker, PageSection, PageShell), the `tailwind-variants` (`tv()`) factory idiom for component variant APIs, composition rules, when to add a new primitive

## Directory Structure

```
components/
├── Common/       # Shared utilities (Copyable, LoadingLine)
├── Detail/       # Entity detail views (PostDetail)
├── Form/         # Reusable form inputs (AuthorSelect)
├── Modals/       # Confirmation/action modals
├── Nav/          # Navigation elements
├── Slideovers/   # Slideout panels (CreatePostSlideover)
├── TabSections/  # Tab content sections
└── Tables/       # Data tables (PostsTable)
```

## Script Setup Order

```vue

// 1. Imports
import createPostActionFactory from '~/features/posts/actions/create-post-action'

// 2. Props & Emits
const props = defineProps()
const emits = defineEmits()

// 3. Composables
const flash = useFlash()

// 4. Injections
const slideover = inject(SlideoverKey)

// 5. Refs
const formRef = useTemplateRef('formRef')

// 6. Toggles
const isOpen = ref(false)

// 7. Reactive props
const formData = ref({ title: '', content: '' })

// 8. Computed
const canSubmit = computed(() => formData.value.title && formData.value.content)

// 9. Fetch + queries
const { data: posts, refresh } = getPostsQuery(filters)

// 10. Builders (action/mutation factories)
const createPostAction = createPostActionFactory()

// 11. Watchers
watch(selectedAuthor, (a) => { formData.value.authorId = a?.ulid || '' })

// 12. Methods
const onSubmit = async (data) => { await createPostAction(data) }

// 13. Real-time listeners
privateChannel(Posts).on(PostCreated, refresh)

// 14. Provides
provide(SlideoverKey, { isOpen })

// 15. Lifecycles
onMounted(() => { /* ... */ })

```

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [leeovery](https://github.com/leeovery)
- **Source:** [leeovery/agentic-skills](https://github.com/leeovery/agentic-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-leeovery-agentic-skills-nuxt-components
- Seller: https://agentstack.voostack.com/s/leeovery
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.