nuxt

Integrate emulators into Nuxt.js apps with same-origin OAuth and catch-all routes.

1.5k|108|Updated Mar 20, 2026
One-click install
npx skills add https://github.com/vercel-labs/emulate --skill nuxt-vercel-labs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nuxt
Source: https://github.com/vercel-labs/emulate/tree/main/skills/nuxt
Command: npx skills add https://github.com/vercel-labs/emulate --skill nuxt-vercel-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @emulators/adapter-nuxt, @emulators/github, @emulators/google, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill facilitates the integration of emulators directly into a Nuxt application, allowing for efficient development and previewing of services.

Core Features & Use Cases

  • Nuxt Adapter: Integrates with Nuxt to run emulators on the same origin, perfect for preview deployments.
  • Same-Origin OAuth: Set up same-origin OAuth for preview deployments to manage user authentication.
  • Emulate Catch-All Server Route: Create a route that serves emulator traffic, simplifying endpoint management.
  • Persistence Configuration: Enable state persistence for embedded emulators to maintain application state across restarts.
  • Nuxt Config Wrapping: Wrap nuxt.config.ts with withEmulate to include emulator assets in Nitro's production trace.
  • Use Case: For developers using Nuxt to create full-stack web applications, this Skill can greatly enhance the development experience by allowing the use of emulators directly within the app for efficient and quick previews.

Quick Start

Install the Skill and integrate it into your Nuxt application using the @emulators/adapter-nuxt package.

Frequently Asked Questions about nuxt

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

FAQPage Schema
How do I run emulators on the same origin in a Nuxt application?

To run emulators on the same origin in a Nuxt application, you use the Nuxt adapter to integrate emulator traffic directly, enabling seamless preview deployments and local development without cross-origin issues.

Can I set up same-origin OAuth for Nuxt preview deployments?

Yes, you can set up same-origin OAuth for Nuxt preview deployments. The emulator integration allows your Nuxt app to handle user authentication directly on the same origin during preview environments.

How do I include emulator assets in Nitro's production trace for Nuxt?

You include emulator assets in Nitro's production trace by wrapping your `nuxt.config.ts` with the `withEmulate` function, ensuring necessary assets are bundled correctly for deployment.

What is a catch-all server route used for when embedding emulators in Nuxt?

A catch-all server route is used to serve emulator traffic within a Nuxt application. Creating this route simplifies endpoint management by directing all emulator requests through a single server path.

Does the Nuxt emulator integration support state persistence across restarts?

Yes, the Nuxt emulator integration supports state persistence. You can enable persistence configuration to maintain your application state across emulator restarts during local development.