### Setup Single Package Project with pnpm

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/ts-library/references/project-setup.md

Clones a starter template, initializes a new Git repository, and installs dependencies for a single package project using pnpm.

```bash
# Clone starter template
cp -r ~/templates/antfu/starter-ts my-lib
cd my-lib && rm -rf .git && git init
pnpm install
```

--------------------------------

### Setup Monorepo Project with pnpm

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/ts-library/references/project-setup.md

Clones a monorepo starter template, initializes a new Git repository, and installs dependencies for a monorepo project using pnpm.

```bash
cp -r ~/templates/antfu/starter-monorepo my-monorepo
cd my-monorepo && rm -rf .git && git init
pnpm install
```

--------------------------------

### ESLint Setup with @antfu/eslint-config

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/ts-library/references/project-setup.md

Installs ESLint and the recommended @antfu/eslint-config package, and configures ESLint for a library project with pnpm support and formatters.

```bash
pnpm add -D eslint @antfu/eslint-config
```

```typescript
// eslint.config.ts
import antfu from '@antfu/eslint-config'

export default antfu({
  type: 'lib',
  pnpm: true,
  formatters: true,
})
```

--------------------------------

### Manual Setup for Single Package Project with pnpm

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/ts-library/references/project-setup.md

Manually creates a new directory, initializes a Node.js project, and installs development dependencies for a single package project using pnpm.

```bash
mkdir my-lib && cd my-lib
pnpm init
pnpm add -D typescript tsdown vitest eslint @antfu/eslint-config
```

--------------------------------

### Git Hooks and Lint Staged Setup

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/ts-library/references/project-setup.md

Installs `simple-git-hooks` and `lint-staged` to automate linting before commits. Includes configuration for Git hooks and lint-staged, and a script to prepare hooks.

```bash
pnpm add -D simple-git-hooks lint-staged
```

```json
{
  "simple-git-hooks": { "pre-commit": "pnpm lint-staged" },
  "lint-staged": { "*": "eslint --fix" },
  "scripts": { "prepare": "simple-git-hooks" }
}
```

--------------------------------

### Contextual Opener Sentence Examples

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/document-writer/references/writing-style.md

Examples of sentences that begin with contextual information before the main clause. These are useful for setting conditions or prerequisites, often starting with conjunctions like 'When', 'During', or 'After'.

```text
When using authentication, configure the session handler.
During SSR, the composable fetches data before hydration.
After installing the module, restart the server.
```

--------------------------------

### Section Opening Sentence Example

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/document-writer/references/writing-style.md

An example of an effective opening sentence for a section within Nuxt documentation. It introduces the topic and explains its relevance, as shown in the 'Configuration' section example.

```text
## Configuration

The module accepts several options that control its behavior.
```

--------------------------------

### Imperative Sentence Examples (Instructions)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/document-writer/references/writing-style.md

Examples of imperative sentences, which are direct commands for actions. These sentences imply a 'you' subject and are commonly used in guides and tutorials to instruct the user.

```text
Add the following to nuxt.config.ts.
Create a new file in server/api.
Run the development server to see changes.
```

--------------------------------

### Using pnpm Catalogs in package.json

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/ts-library/references/project-setup.md

Demonstrates how to reference dependencies defined in pnpm catalogs within the `package.json` file, organizing devDependencies by category.

```json
{
  "devDependencies": {
    "tsdown": "catalog:build",
    "eslint": "catalog:lint",
    "vitest": "catalog:test",
    "typescript": "catalog:types"
  }
}
```

--------------------------------

### Page Opening Sentence Examples

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/document-writer/references/writing-style.md

Examples of effective opening sentences for pages in Nuxt documentation. These sentences should clearly define the topic, its purpose, and key benefits, avoiding phrases like 'This page describes...'.

```text
Server routes create API endpoints in your Nuxt app.
They run on the server with access to databases and external services.
```

--------------------------------

### Paragraph Structure Example

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/document-writer/references/writing-style.md

An example illustrating the recommended paragraph structure for Nuxt documentation, which includes a topic sentence followed by 2-4 supporting sentences. This ensures clarity and conciseness.

```text
Route middleware runs before navigation.
Use it to check authentication or redirect users.
Define middleware in the middleware directory.
```

--------------------------------

### CI Workflow Setup for Nuxt Projects

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt/references/project-setup.md

Configures a GitHub Actions CI workflow for Nuxt projects using pnpm as the package manager. It checks out code, sets up Node.js, installs dependencies, runs prepare, lint, typecheck, and optionally tests.

```yaml
# .github/workflows/ci.yml
name: CI
on: [push, pull_request]

jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with: {node-version: 22, cache: pnpm}
      - run: pnpm install --frozen-lockfile
      - run: pnpm prepare
      - run: pnpm lint
      - run: pnpm typecheck
      - run: pnpm test # if tests exist

```

--------------------------------

### Project Scripts for Build, Test, and Release

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/ts-library/references/project-setup.md

Defines common project scripts in `package.json` for building, development watch mode, linting, type checking, testing, releasing, and pre-publish tasks.

```json
{
  "scripts": {
    "build": "tsdown",
    "dev": "tsdown --watch",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "typecheck": "tsc --noEmit",
    "test": "vitest",
    "release": "bumpp",
    "prepublishOnly": "pnpm build"
  }
}
```

--------------------------------

### Multi-Environment Wrangler Setup (JSON)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxthub/references/wrangler-templates.md

An example of a wrangler.jsonc configuration demonstrating a multi-environment setup, specifically for staging and production. It shows how to define different D1 database configurations per environment.

```json
{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "my-app",
  "compatibility_flags": ["nodejs_compat"],
  "d1_databases": [{ "binding": "DB", "database_name": "my-app-db-prod", "database_id": "prod-db-id" }],
  "env": {
    "staging": {
      "d1_databases": [{ "binding": "DB", "database_name": "my-app-db-staging", "database_id": "staging-db-id" }]
    }
  }
}
```

--------------------------------

### Nuxt Module Lifecycle Hooks for Setup

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-modules/references/testing-and-publishing.md

Demonstrates the use of `onInstall` and `onUpgrade` lifecycle hooks within a Nuxt module definition. These hooks are suitable for one-time setup tasks or migrations when the module is installed or upgraded.

```typescript
export default defineNuxtModule({
  meta: { name: 'my-module', version: '2.0.0' },

  async onInstall(nuxt) {
    await generateInitialConfig(nuxt.options.rootDir)
  },

  async onUpgrade(options, nuxt, previousVersion) {
    if (semver.lt(previousVersion, '2.0.0')) {
      await migrateFromV1()
    }
  }
})
```

--------------------------------

### Basic useTimeoutFn Usage

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-timeout-fn.md

Demonstrates the basic setup for `useTimeoutFn`, importing it and initializing it with a callback function and a delay. It shows how to access the `isPending`, `start`, and `stop` controls.

```typescript
import { useTimeoutFn } from '@vueuse/core'

const { isPending, start, stop } = useTimeoutFn(() => {
  // Callback function to execute after the delay
  console.log('Timeout executed!')
}, 3000) // 3000 milliseconds delay
```

--------------------------------

### NuxtHub Deployment Workflow

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt/references/project-setup.md

Configures a GitHub Actions workflow to deploy a Nuxt project to NuxtHub. It checks out code, sets up Node.js with pnpm, installs dependencies, and uses the `nuxt-hub/action` to perform the deployment.

```yaml
# .github/workflows/nuxthub.yml
name: Deploy to NuxtHub
on: push

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions: {contents: read, id-token: write}
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with: {node-version: 22, cache: pnpm}
      - run: pnpm install
      - uses: nuxt-hub/action@v2
        with:
          project-key: your-project-key

```

--------------------------------

### pnpm Workspace Configuration

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/ts-library/references/project-setup.md

Defines the package directories and dependency catalogs for a pnpm monorepo. Catalogs help organize dependencies by purpose.

```yaml
packages:
  - packages/*
  - playground

catalogs:
  build:
    tsdown: ^0.15.0
    unbuild: ^3.0.0
  lint:
    eslint: ^9.0.0
    '@antfu/eslint-config': ^4.0.0
  test:
    vitest: ^3.0.0
  types:
    typescript: ^5.7.0
```

--------------------------------

### Vue Composition API Example for useMediaControls

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-media-controls.md

Demonstrates how to use the useMediaControls composable in a Vue 3 setup script to control a video element. It shows initializing controls, setting properties like volume and current time, and basic playback toggling.

```typescript
import { useMediaControls } from '@vueuse/core'
import { onMounted, useTemplateRef } from 'vue'

const video = useTemplateRef('video')
const { playing, currentTime, duration, volume } = useMediaControls(video, {
  src: 'video.mp4',
})

// Change initial media properties
onMounted(() => {
  volume.value = 0.5
  currentTime.value = 60
})
```

--------------------------------

### Basic useSwipe Setup in Vue.js

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-swipe.md

Demonstrates the basic setup for using the useSwipe composable in a Vue.js application. It imports necessary functions, sets up a template ref for the target element, and utilizes the isSwiping and direction states returned by useSwipe.

```typescript
import { useSwipe } from '@vueuse/core'
import { useTemplateRef } from 'vue'

const el = useTemplateRef('el')
const { isSwiping, direction } = useSwipe(el)

```

--------------------------------

### Full Nuxt Content Configuration Example

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-content/references/config.md

A comprehensive example demonstrating the integration of database, markdown, and renderer configurations within `nuxt.config.ts`. This serves as a template for setting up Nuxt Content.

```typescript
export default defineNuxtConfig({
  content: {
    database: {
      type: 'sqlite',
      filename: '.data/content.db',
    },
    build: {
      markdown: {
        toc: { depth: 3, searchDepth: 2 },
        remarkPlugins: {
          'remark-gfm': {},
        },
        highlight: {
          themes: { default: 'github-light', dark: 'github-dark' },
          langs: ['vue', 'ts', 'bash', 'yaml', 'json'],
        },
      },
    },
    renderer: {
      anchorLinks: { h2: true, h3: true },
    },
  },
})
```

--------------------------------

### Server Authentication Configuration

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-better-auth/references/installation.md

Configures server-side authentication using `defineServerAuth`. This example enables email/password authentication and sets up GitHub as an OAuth provider, along with session management options.

```typescript
import { defineServerAuth } from '#auth/server'

export default defineServerAuth(({ runtimeConfig, db }) => ({
  emailAndPassword: { enabled: true },
  // OAuth providers
  socialProviders: {
    github: {
      clientId: runtimeConfig.github.clientId,
      clientSecret: runtimeConfig.github.clientSecret
    }
  },
  // Session configuration (optional)
  session: {
    expiresIn: 60 * 60 * 24 * 7,      // 7 days (default)
    updateAge: 60 * 60 * 24,           // Update every 24h (default)
    freshAge: 60 * 60 * 24,            // Consider fresh for 24h (default, 0 to disable)
    cookieCache: {
      enabled: true,
      maxAge: 60 * 5                   // 5 minutes cookie cache
    }
  }
}))
```

--------------------------------

### Interact with KV Storage using NuxtHub

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxthub/SKILL.md

Example code demonstrating how to use the auto-imported `kv` object from NuxtHub for key-value storage operations. Includes setting, getting, checking existence, deleting, and managing keys with optional TTL.

```typescript
import { kv } from 'hub:kv'

await kv.set('key', { data: 'value' })
await kv.set('key', value, { ttl: 60 }) // TTL in seconds
const value = await kv.get('key')
const exists = await kv.has('key')
await kv.del('key')
const keys = await kv.keys('prefix:')
await kv.clear('prefix:')
```

--------------------------------

### Install Vitest

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/ts-library/references/testing.md

Installs Vitest as a development dependency using pnpm. This is the first step to enable testing in your project.

```bash
pnpm add -D vitest
```

--------------------------------

### Add Async Vite and Webpack Plugins

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-modules/references/development.md

Demonstrates how to lazily load and add Vite and Webpack plugins within a Nuxt module setup. This is useful for optimizing build times by only loading bundler plugins when needed.

```typescript
import { addVitePlugin, addWebpackPlugin } from '@nuxt/kit'

export default defineNuxtModule({
  async setup() {
    // Lazy-load only the bundler plugin needed
    addVitePlugin(() => import('my-plugin/vite').then(r => r.default()))
    addWebpackPlugin(() => import('my-plugin/webpack').then(r => r.default()))
  }
})
```

--------------------------------

### Initialize and Start User Media Stream in Vue.js

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-user-media.md

This snippet demonstrates how to initialize and start a user media stream using the `useUserMedia` composable from `@vueuse/core`. It then sets up a watcher to display the stream on a video element. Dependencies include `vueuse/core` and `vue`.

```typescript
import { useUserMedia } from '@vueuse/core'
import { useTemplateRef, watchEffect } from 'vue'

const { stream, start } = useUserMedia()
start()

const videoRef = useTemplateRef('video')
watchEffect(() => {
  // preview on a video element
  videoRef.value.srcObject = stream.value
})
```

--------------------------------

### Configure GitHub Actions for PR Previews with pkg-pr-new

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/ts-library/references/release.md

Sets up a GitHub Actions workflow to automatically publish preview packages for pull requests using pkg-pr-new. This requires checkout, Node.js setup, pnpm installation, building the project, and then running pkg-pr-new.

```yaml
# .github/workflows/pkg-pr-new.yml
name: Publish PR
on: pull_request

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
      - run: pnpm install
      - run: pnpm build
      - run: pnpm dlx pkg-pr-new publish --compact --pnpm
```

--------------------------------

### Install Nuxt Better Auth Package

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-better-auth/references/installation.md

Installs the necessary packages for Nuxt Better Auth using pnpm. It specifies version requirements for the core modules.

```bash
pnpm add @onmax/nuxt-better-auth better-auth
```

--------------------------------

### Install Nuxt Skills CLI Commands

Source: https://context7.com/onmax/nuxt-skills/llms.txt

Commands to install Nuxt Skills into an AI coding assistant using the skills CLI. Supports interactive, global, and batch installations. Also includes an alternative installation method for Claude Code.

```bash
# Interactive install with auto-detection
npx skills add onmax/nuxt-skills

# Global install
npx skills add onmax/nuxt-skills -g

# Install all skills
npx skills add onmax/nuxt-skills -y

# Claude Code marketplace alternative
/plugin marketplace add onmax/nuxt-skills
/plugin install vue@nuxt-skills nuxt@nuxt-skills nuxt-ui@nuxt-skills
```

--------------------------------

### Nuxt UI Installation Configuration

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-ui/SKILL.md

Configuration for installing and setting up the Nuxt UI module in a Nuxt project. This involves adding the module to `nuxt.config.ts` and including necessary CSS imports.

```typescript
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})
```

--------------------------------

### Install E2E Testing Dependencies

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-modules/references/testing-and-publishing.md

Installs necessary development dependencies for End-to-End testing using Vitest with Nuxt test utils. This includes `@nuxt/test-utils` for Nuxt-specific testing utilities and `vitest` as the test runner.

```bash
npm install -D @nuxt/test-utils vitest
```

--------------------------------

### Active vs. Passive Voice Examples

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/document-writer/references/writing-style.md

Demonstrates the preference for active voice in Nuxt documentation, where the subject performs the action. It contrasts active voice examples with their passive voice counterparts, which should generally be avoided.

```text
Active (use): The module creates a connection
Passive (avoid): A connection is created by the module
Active (use): You can override defaults
Passive (avoid): Defaults can be overridden
Active (use): Nuxt handles routing
Passive (avoid): Routing is handled by Nuxt
```

--------------------------------

### Declarative Sentence Examples (Subject-First)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/document-writer/references/writing-style.md

Examples of subject-first declarative sentences, which place the subject at the beginning of the sentence followed by the verb. This structure is clear and direct, making it suitable for stating facts or describing functionality.

```text
The useFetch composable handles data fetching automatically.
Nuxt provides a powerful auto-import system.
This option controls module behavior during development.
```

--------------------------------

### Deferring Slow Setup Tasks in Nuxt Module

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-modules/references/testing-and-publishing.md

Illustrates a best practice for Nuxt module setup: deferring slow asynchronous operations (like fetching remote config) to the `ready` hook. This prevents blocking the Nuxt server startup and improves initial load times.

```typescript
// Wrong - blocking
async setup(options, nuxt) {
  const data = await fetchRemoteConfig()  // Slow!
}

// Right - defer to hooks
setup(options, nuxt) {
  nuxt.hook('ready', async () => {
    const data = await fetchRemoteConfig()
  })
}
```

--------------------------------

### Vue Composition API: useClipboard Setup

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-clipboard.md

Demonstrates how to set up and use the `useClipboard` composable in a Vue.js application using the Composition API. It shows how to bind a source ref, trigger the copy action, and display the copied text and status.

```typescript
import { useClipboard } from '@vueuse/core'

const source = ref('Hello')
const { text, copy, copied, isSupported } = useClipboard({ source })

```

--------------------------------

### Create Cloudflare Resources (Bash)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxthub/SKILL.md

Command-line interface commands using `wrangler` to create necessary Cloudflare resources: D1 database, KV namespaces, and R2 bucket. These commands help obtain the IDs and names required for configuration.

```bash
npx wrangler d1 create my-db              # Get database-id
npx wrangler kv namespace create KV       # Get kv-namespace-id
npx wrangler kv namespace create CACHE    # Get cache-namespace-id
npx wrangler r2 bucket create my-bucket   # Get bucket-name
```

--------------------------------

### Detect Typing Start with onStartTyping (TypeScript)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/on-start-typing.md

This snippet demonstrates how to use the `onStartTyping` composable from `@vueuse/core` to detect when a user begins typing. It utilizes `useTemplateRef` to get a reference to an input element and focuses it when typing starts. This is useful for enhancing user experience by automatically bringing attention to input fields.

```typescript
import { onStartTyping } from '@vueuse/core'
import { useTemplateRef } from 'vue'

const input = useTemplateRef('input')

onStartTyping(() => {
  if (!input.value.active)
    input.value.focus()
})

```

--------------------------------

### Blog Post Frontmatter Example (YAML)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/document-writer/references/content-patterns.md

Defines the metadata for a blog post, including title, description, navigation settings, author information, date, and category. This structure is crucial for SEO and content organization.

```yaml
---
title: Post Title
description: Brief description for SEO and previews (under 160 chars)
navigation: false
image: /assets/blog/slug.png
authors:
  - name: Author Name
    avatar:
      src: https://github.com/username.png
    to: https://x.com/username
date: 2025-11-05T10:00:00.000Z
category: Release
---
```

--------------------------------

### Configure Nuxt Module in nuxt.config.ts

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-modules/references/development.md

Shows how to configure a Nuxt module in the `nuxt.config.ts` file. This example demonstrates adding the module to the `modules` array and providing custom options.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/example'],
  example: { apiKey: 'xxx' }
})
```

--------------------------------

### Plugin Entry Pattern Configuration (JSON)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/ts-library/references/package-exports.md

Sets up a package with multiple entry points tailored for different build tools or frameworks, such as Vite, Webpack, and Nuxt. This pattern is common for libraries providing plugins or integrations.

```json
{
  "exports": {
    ".": {
      "types": "./dist/index.d.mts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    },
    "./vite": {
      "types": "./dist/vite.d.mts",
      "import": "./dist/vite.mjs",
      "require": "./dist/vite.cjs"
    },
    "./webpack": {
      "types": "./dist/webpack.d.mts",
      "import": "./dist/webpack.mjs",
      "require": "./dist/webpack.cjs"
    },
    "./nuxt": {
      "types": "./dist/nuxt.d.mts",
      "import": "./dist/nuxt.mjs",
      "require": "./dist/nuxt.cjs"
    }
  }
}
```

--------------------------------

### Condition Order Example (JSON)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/ts-library/references/package-exports.md

Illustrates the correct order for specifying conditions within the 'exports' field. The most specific conditions should be listed first to ensure proper resolution.

```json
{
  ".": {
    "types": "...",      // Always first
    "import": "...",     // ESM
    "require": "..."     // CJS fallback
  }
}
```

--------------------------------

### Cloudflare Resource Creation Commands

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxthub/references/providers.md

CLI commands to create necessary resources for Cloudflare deployment, including D1 databases, KV namespaces, and R2 buckets.

```bash
npx wrangler d1 create my-db
npx wrangler kv namespace create KV
npx wrangler kv namespace create CACHE
npx wrangler r2 bucket create my-bucket
```

--------------------------------

### Reactive Array Summation with useSum (TypeScript)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-sum.md

Demonstrates how to use the useSum composable to get a reactive sum of an array. It takes a ref containing an array of numbers and returns a ref with the calculated sum. Ensure you have @vueuse/math installed.

```typescript
import { useSum } from '@vueuse/math'

const array = ref([1, 2, 3, 4])
const sum = useSum(array) // Ref<10>
```

--------------------------------

### Define Nuxt Module with Options and Hooks

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-modules/references/development.md

Demonstrates how to define a Nuxt module using `defineNuxtModule` from `@nuxt/kit`. It includes defining module options, default values, lifecycle hooks, module dependencies, and setup logic.

```typescript
import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'

export interface ModuleOptions {
  apiKey?: string
  prefix?: string
}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: '@nuxtjs/example',
    configKey: 'example',
    compatibility: { nuxt: '>=3.0.0' }
  },
  defaults: {
    apiKey: '',
    prefix: 'My'
  },
  hooks: {
    'app:error': err => console.error(err)
  },
  moduleDependencies: {
    '@nuxtjs/tailwindcss': { version: '>=6.0.0', optional: true }
  },
  // Or as async function (Nuxt 4.3+)
  async moduleDependencies(nuxt) {
    const needsSupport = nuxt.options.runtimeConfig.public?.feature
    return {
      '@nuxtjs/tailwindcss': needsSupport ? {} : { optional: true }
    }
  },
  setup(options, nuxt) {
    const { resolve } = createResolver(import.meta.url)
    addPlugin(resolve('./runtime/plugin'))
  }
})
```

--------------------------------

### Nuxt Module Option Validation

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-modules/references/testing-and-publishing.md

Shows how to validate required options within a Nuxt module's setup function. If a critical option like `apiKey` is missing, an informative error is thrown to guide the developer.

```typescript
setup(options, nuxt) {
  if (!options.apiKey) {
    throw new Error('[my-module] `apiKey` option is required')
  }
}
```

--------------------------------

### Nuxt UI App Wrapper

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-ui/SKILL.md

Example of setting up the root `app.vue` file to include the `UApp` wrapper component, which is required for overlays and other UI functionalities in Nuxt UI.

```vue
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
```

--------------------------------

### Get Reactive Average of Array with useAverage (TypeScript)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-average.md

Demonstrates how to use the `useAverage` composable to calculate the average of a reactive array. It takes a ref array as input and returns a ref containing the calculated average. Ensure `@vueuse/math` is installed.

```typescript
import { useAverage } from '@vueuse/math'

const list = ref([1, 2, 3])
const averageValue = useAverage(list) // Ref<2>
```

--------------------------------

### Vue 3 Composition API with useCookies

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-cookies.md

Demonstrates how to use the useCookies composable in a Vue 3 Composition API setup. It shows initializing cookies, getting specific cookie values, retrieving all cookies, and setting cookie values.

```typescript
import { useCookies } from '@vueuse/integrations/useCookies'

const cookies = useCookies(['locale'])

// Example usage within a Vue component:
// <template>
//   <div>
//     <strong>locale</strong>: {{ cookies.get('locale') }}
//     <hr>
//     <pre>{{ cookies.getAll() }}</pre>
//     <button @click="cookies.set('locale', 'ru-RU')">
//       Russian
//     </button>
//     <button @click="cookies.set('locale', 'en-US')">
//       English
//     </button>
//   </div>
// </template>
```

--------------------------------

### Configure NuxtHub Module

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxthub/SKILL.md

Example configuration for the NuxtHub module in `nuxt.config.ts`. It shows how to enable database, KV, blob, and cache, and specify the local storage directory.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxthub/core'],
  hub: {
    db: 'sqlite', // 'sqlite' | 'postgresql' | 'mysql'
    kv: true,
    blob: true,
    cache: true,
    dir: '.data', // local storage directory
    remote: false // use production bindings in dev (v0.10.4+)
  }
})
```

--------------------------------

### Nuxt Project Package Scripts

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt/references/project-setup.md

Defines essential npm scripts for a Nuxt project, including development (`dev`), build (`build`), preview (`preview`), preparation (`prepare`), linting (`lint`, `lint:fix`), and type checking (`typecheck`).

```json
{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "preview": "nuxt preview",
    "prepare": "nuxt prepare",
    "lint": "eslint . --cache",
    "lint:fix": "eslint . --fix --cache",
    "typecheck": "nuxt typecheck"
  }
}

```

--------------------------------

### Named Route Middleware in Nuxt.js

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt/references/middleware-plugins.md

Defines a named route middleware that runs only when explicitly applied to a route. This example checks if the user is an administrator and redirects to the homepage if they are not. It is applied in the page's script setup using `definePageMeta`.

```typescript
// middleware/admin.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const auth = useAuthStore()

  if (!auth.isAdmin) {
    return navigateTo('/')
  }
})
```

```vue
<script setup lang="ts">
definePageMeta({
  middleware: ['admin']
})
</script>
```

--------------------------------

### Disable Nuxt Modules via Configuration (TypeScript)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-modules/references/development.md

Provides examples of how to disable Nuxt modules directly in `nuxt.config.ts`. It covers disabling a module by setting its configuration to `false` and disabling modules inherited from layers using `disabledModules`.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  tailwindcss: false  // Disable the module
})
```

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  extends: ['../base-layer'],
  disabledModules: ['@nuxt/image', '@sentry/nuxt/module']
})
```

--------------------------------

### Initialize useVirtualList with Data and Item Height (TypeScript)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-virtual-list.md

Demonstrates how to import and use the `useVirtualList` composable. It takes an array of data (here, a large array of numbers) and an options object specifying the `itemHeight`. The returned `list`, `containerProps`, and `wrapperProps` are essential for setting up virtual scrolling.

```typescript
import { useVirtualList } from '@vueuse/core'

const { list, containerProps, wrapperProps } = useVirtualList(
  Array.from(Array.from({ length: 99999 }).keys()),
  {
    // Keep `itemHeight` in sync with the item's row.
    itemHeight: 22,
  },
)
```

--------------------------------

### Accessing and Modifying Route Parameters with useRouteParams (TypeScript)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-route-params.md

Demonstrates how to use the useRouteParams composable to get reactive route parameters. It shows how to provide a default value and how to transform the parameter's type. The example also illustrates updating the route parameter.

```typescript
import { useRouteParams } from '@vueuse/router'

const userId = useRouteParams('userId')

const userId = useRouteParams('userId', '-1') // or with a default value

const userId = useRouteParams('page', '1', { transform: Number }) // or transforming value

console.log(userId.value) // route.params.userId
userId.value = '100' // router.replace({ params: { userId: '100' } })

```

--------------------------------

### Manual Database Setup without NuxtHub

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-better-auth/references/database.md

Manually configure the database adapter for Better Auth when not using NuxtHub's automatic integration.

```typescript
// server/auth.config.ts
import { drizzle } from 'drizzle-orm/.'
import { defineServerAuth } from '#auth/server'

const db = drizzle(...)

export default defineServerAuth(() => ({
  database: drizzleAdapter(db, { provider: 'sqlite' })
}))
```

--------------------------------

### Package Preview Workflow: Publish via pkg-pr-new (YAML)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-modules/references/ci-workflows.md

This workflow publishes preview packages for every pull request to the main branch using the pkg-pr-new tool. It sets up the environment using actions/checkout, pnpm/action-setup, and actions/setup-node, then runs install, prepare, prepack, and the publish command.

```yaml
name: pkg.new

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  pkg:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm

      - run: pnpm install
      - run: pnpm dev:prepare
      - run: pnpm prepack
      - run: pnpm dlx pkg-pr-new publish

```

--------------------------------

### Use UPageBody Component

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-ui/components/page-body.md

Demonstrates the basic usage of the UPageBody component within a Vue template. This component is typically used to wrap and render the main content of a page. No specific props are shown in this basic example, but it serves as a starting point for integration.

```vue
<UPageBody
  <!-- props here -->
/>
```

--------------------------------

### Client Authentication Configuration

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-better-auth/references/installation.md

Sets up the client-side authentication configuration using `createAppAuthClient`. This is where client-specific options, such as for passkeys or two-factor authentication, would be defined.

```typescript
import { createAppAuthClient } from '#auth/client'

export default createAppAuthClient({
  // Client-side plugin options (e.g., passkey, twoFactor)
})
```

--------------------------------

### Using UContainer Component in Vue

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-ui/components/container.md

Demonstrates the basic usage of the UContainer component in a Vue template. This component is used to center and constrain the width of its child content. No specific props are shown in this basic example, but it serves as a starting point for applying the container.

```vue
<UContainer
  <!-- props here -->
/>
```

--------------------------------

### Extending Nuxt Configuration with Layers

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt/references/nuxt-config.md

Demonstrates how to use Nuxt layers to extend or share configuration across different parts of a project or between multiple Nuxt applications. This is achieved by specifying layer paths in the `extends` array.

```typescript
export default defineNuxtConfig({
  extends: [
    './base-layer'
  ]
})
```

--------------------------------

### Get Element Size with useElementSize (TypeScript/Vue)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-element-size.md

This snippet demonstrates how to use the `useElementSize` composable in a Vue 3 setup script. It requires importing `useElementSize` from `@vueuse/core` and `useTemplateRef` from `vue`. The composable takes a template ref to an element and returns reactive `width` and `height` shallow refs.

```typescript
import { useElementSize } from '@vueuse/core'
import { useTemplateRef } from 'vue'

const el = useTemplateRef('el')
const { width, height } = useElementSize(el)
```

--------------------------------

### Track Active Element with useActiveElement (TypeScript)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-active-element.md

This snippet demonstrates how to use the `useActiveElement` composable in a Vue.js setup. It imports the composable, calls it to get a reactive reference to the active element, and then uses a watcher to log changes to the console. No external dependencies are required beyond Vue and @vueuse/core.

```typescript
import { useActiveElement } from '@vueuse/core'
import { watch } from 'vue'

const activeElement = useActiveElement()

watch(activeElement, (el) => {
  console.log('focus changed to', el)
})
```

--------------------------------

### Basic USwitch Usage in Vue

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-ui/components/switch.md

Demonstrates the basic usage of the USwitch component within a Vue template. This example shows where to place component props for customization.

```vue
<USwitch
  <!-- props here -->
/>
```

--------------------------------

### Initialize useMediaQuery Hook (TypeScript)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-media-query.md

Demonstrates how to import and use the useMediaQuery composable to create reactive boolean states for different media queries. It takes a media query string as input and returns a ref that updates automatically.

```typescript
import { useMediaQuery } from '@vueuse/core'

const isLargeScreen = useMediaQuery('(min-width: 1024px)')
const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)')
```

--------------------------------

### Vue Template Usage of useWindowScroll

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-window-scroll.md

This example shows how to integrate `useWindowScroll` within a Vue 3 `<script setup>` block and template. It displays the current scroll position and provides buttons to programmatically scroll the window to specific coordinates. This requires Vue 3 and the VueUse library.

```html
<script setup lang="ts">
import { useWindowScroll } from '@vueuse/core'

const { x, y } = useWindowScroll()
</script>

<template>
  <div>
    read current x, y scroll: {{ x }}, {{ y }}
  </div>
  <button @click="x = 100">
    scroll X to 100
  </button>
  <button @click="y = 100">
    scroll Y to 100
  </button>
</template>
```

--------------------------------

### Get and Set Zoom Level with useZoomLevel (TypeScript)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-zoom-level.md

This snippet demonstrates how to import and use the `useZoomLevel` composable from `@vueuse/electron`. It shows how to retrieve the current zoom level and how to update it programmatically. Ensure `nodeIntegration` is enabled in your Electron setup if you are not explicitly providing a `webFrame` object.

```typescript
import { useZoomLevel } from '@vueuse/electron'

// enable nodeIntegration if you don't provide webFrame explicitly
// see: https://www.electronjs.org/docs/api/webview-tag#nodeintegration
// Ref result will return
const level = useZoomLevel()
console.log(level.value) // print current zoom level
level.value = 2 // change current zoom level
```

--------------------------------

### Client Plugin Setup for Better Auth

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-better-auth/references/plugins.md

Sets up client-side authentication plugins for Better Auth. It initializes the client with plugins for admin, two-factor, passkey, and multi-session, enabling frontend authentication features.

```typescript
// app/auth.config.ts
import { createAppAuthClient } from '#auth/client'
import { adminClient, twoFactorClient, passkeyClient, multiSessionClient } from 'better-auth/client/plugins'

export default createAppAuthClient({
  plugins: [
    adminClient(),
    twoFactorClient(),
    passkeyClient(),
    multiSessionClient()
  ]
})
```

--------------------------------

### ESLint Configuration for Nuxt Projects

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt/references/project-setup.md

Sets up ESLint configuration for Nuxt projects using `@antfu/eslint-config`. It enables formatters, Vue support, pnpm integration, and specifies ignores for cache and documentation directories. For monorepos, additional ignores for build outputs are included.

```javascript
// eslint.config.mjs
import antfu from '@antfu/eslint-config'
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  antfu({
    formatters: true,
    vue: true,
    pnpm: true,
    ignores: ['.eslintcache', 'cache/**', '.claude/**', 'README.md', 'docs/**'],
  }),
)

```

```javascript
ignores: ['apps/web/.nuxt/**', 'packages/**/dist/**']

```

--------------------------------

### Initialize useDrauu with Vue Template Refs

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-drauu.md

This snippet demonstrates how to initialize and use the `useDrauu` composable within a Vue.js application using `<script setup>`. It utilizes `useTemplateRef` to get a reference to the target SVG element and exposes drawing control functions like `undo`, `redo`, and brush properties.

```typescript
import { toRefs } from '@vueuse/core'
import { useDrauu } from '@vueuse/integrations/useDrauu'
import { useTemplateRef } from 'vue'

const target = useTemplateRef('target')
const { undo, redo, canUndo, canRedo, brush } = useDrauu(target)
const { color, size } = toRefs(brush)
```

--------------------------------

### NPM Publish with OIDC (Recommended)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/ts-library/references/release.md

Example of an npm publish step using OIDC (OpenID Connect) for authentication, which is the recommended and more secure method. This avoids the need for storing secrets like NPM_TOKEN.

```yaml
- run: pnpm publish --access public --no-git-checks --provenance
```

--------------------------------

### Using UPage Component for Grid Layouts in Vue

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-ui/components/page.md

Demonstrates the basic usage of the UPage component within a Vue template. This component is designed to create grid layouts with left and right columns. No specific props are shown in this basic example, but it serves as a starting point for integrating the component.

```vue
<UPage
  <!-- props here -->
/>
```

--------------------------------

### Use Reactive ipcRenderer Invoke API (TypeScript)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-ipc-renderer-invoke.md

This snippet demonstrates how to use the `useIpcRendererInvoke` composable to call an Electron main process channel and get a reactive result. It imports necessary functions from Vue and @vueuse/electron, defines a channel name and data, and then uses a computed property to access a specific part of the result. Ensure `nodeIntegration` is enabled in your Electron setup or provide `ipcRenderer` explicitly.

```typescript
import { useIpcRendererInvoke } from '@vueuse/electron'
import { computed } from 'vue'

// enable nodeIntegration if you don't provide ipcRenderer explicitly
// see: https://www.electronjs.org/docs/api/webview-tag#nodeintegration
// Ref result will return
const result = useIpcRendererInvoke<string>('custom-channel', 'some data')
const msg = computed(() => result.value?.msg)
```

--------------------------------

### Initialize useStorageAsync

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-storage-async.md

Demonstrates how to initialize useStorageAsync with a key, default value, and an asynchronous storage provider. It highlights that the initial value might be empty until the async storage is ready.

```typescript
import { useStorageAsync } from '@vueuse/core'

const accessToken = useStorageAsync('access.token', '', SomeAsyncStorage)

// accessToken.value may be empty before the async storage is ready
console.log(accessToken.value) // ""

setTimeout(() => {
  // After some time, the async storage is ready
  console.log(accessToken.value) // "the real value stored in storage"
}, 500)
```

--------------------------------

### Basic Gamepad Usage with Vue

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-gamepad.md

Demonstrates how to use the useGamepad composable to access gamepad information and display the ID of the first standard gamepad found. It relies on the @vueuse/core package and Vue's computed properties.

```typescript
import { useGamepad } from '@vueuse/core'
import { computed } from 'vue'

const { isSupported, gamepads } = useGamepad()
const gamepad = computed(() => gamepads.value.find(g => g.mapping === 'standard'))
```

--------------------------------

### Initialize useWebSocket Client (TypeScript)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-web-socket.md

Demonstrates how to import and initialize the useWebSocket composable with a WebSocket server URL. It returns reactive references for connection status, data, and control functions.

```typescript
import { useWebSocket } from '@vueuse/core'

const { status, data, send, open, close } = useWebSocket('ws://websocketurl')
```

--------------------------------

### Initialize useDevicesList in TypeScript

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/use-devices-list.md

Demonstrates how to import and use the `useDevicesList` composable in a TypeScript Vue project. It shows how to destructure the returned reactive references for devices, cameras, microphones, and speakers.

```typescript
import { useDevicesList } from '@vueuse/core'

const { 
  devices,
  videoInputs: cameras,
  audioInputs: microphones,
  audioOutputs: speakers,
} = useDevicesList()
```

--------------------------------

### Accessing Reactive References with get (TypeScript)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vueuse/composables/get.md

Demonstrates how to use the 'get' utility function to retrieve the value from a Vue ref. This function is part of the @vueuse/core package and simplifies accessing reactive state.

```typescript
import { get } from '@vueuse/core'

const a = ref(42)

console.log(get(a)) // 42
```

--------------------------------

### Defining Generic Vue Components with Typed Slots

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/vue/references/typescript.md

This example shows how to create generic Vue 3 components using the `<script setup lang="ts" generic="...">` syntax. It demonstrates defining generic types constrained by interfaces and typing slots to accept specific props, ensuring type safety for both the component's props and its slot content.

```vue
<script setup lang="ts" generic="T extends { id: string }">
defineProps({
  items: Array<T>
})

defineSlots<{
  default: (props: { item: T }) => any
}>()
</script>

<template>
  <div v-for="item in items" :key="item.id">
    <slot :item="item" />
  </div>
</template>
```

--------------------------------

### Nuxt Skills Toast Notification Example

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-ui/references/overlays.md

Demonstrates the basic usage of the toast notification system in Nuxt Skills. Requires the `<UApp>` wrapper and utilizes the `useToast` composable to display a success message with a title and description.

```vue
<script setup>
const toast = useToast()

function showToast() {
  toast.add({
    title: 'Success!',
    description: 'Your changes have been saved.',
    color: 'success',
    icon: 'i-heroicons-check-circle'
  })
}
</script>

<template>
  <UButton @click="showToast">Show Toast</UButton>
</template>
```

--------------------------------

### Install Nuxt UI for Nuxt.js

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/nuxt-ui/references/installation.md

Installs the Nuxt UI package and configures it within the Nuxt application. This involves adding the module to `nuxt.config.ts` and importing necessary CSS. The `UApp` wrapper is critical for overlays.

```bash
pnpm add @nuxt/ui
```

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})
```

```css
/* assets/css/main.css */
@import 'tailwindcss';
@import '@nuxt/ui';
```

```vue
<!-- app.vue -->
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
```

--------------------------------

### Steps Component Usage (Markdown)

Source: https://github.com/onmax/nuxt-skills/blob/main/skills/document-writer/references/content-patterns.md

Demonstrates the correct usage of the `::steps` MDC component. It highlights that step numbers should not be included in the step titles to avoid duplication.

```markdown
::steps
### Install the module
### Configure nuxt.config.ts
### Restart dev server
::
```