DOCSEARCHbyAlgolia
Submit Docs

nuxt.com Repository Documentation

repository·main·Indexed 19 days ago

https://github.com/nuxt/nuxt.com

Documentation for the official Nuxt website, featuring the Nuxi (Eve) AI agent runtime. Covers development modes (UI-only, Nuxi, and Full), Nuxi layer architecture, Discord and Slack integration, local documentation configuration, and the Model Context Protocol (MCP) server evaluation process.

Tokens
68.8K
Snippets
279
Records
394
Agent score
66%

What's inside nuxt.com

  1. Overview of Nuxt ESLint packages

    main

    Nuxt's ESLint ecosystem has been consolidated into a single monorepo (nuxt/eslint). The key packages are:

    • @nuxt/eslint: The primary, all-in-one ESLint module for Nuxt 3. It supports project-aware ESLint flat config.
    • @nuxt/eslint-config: A customizable shared ESLint config for Nuxt 3. It supports both the new flat config format and the legacy format.
    • @nuxt/eslint-plugin: Provides Nuxt-specific rules and configurations.

    Note: There are also two packages maintained for Nuxt 2, which are currently in maintenance mode.

  2. Overview of Nuxt DevTools

    main

    Nuxt DevTools is a developer experience tool designed to provide transparency into your Nuxt application. It helps developers understand the underlying abstractions, such as auto-imports, modules, and routing, which can otherwise be implicit.

    Key features include inspecting:

    • Pages: View your application's route structure.
    • Components: Inspect components, including those that are auto-imported.
    • Imports: Trace where auto-imported components, composables, and utilities originate.
    • Modules: See which Nuxt modules are active in your project.
    • Assets: Manage and view project assets.
    • Plugins: Inspect registered plugins.
    • Hooks: Monitor Nuxt lifecycle hooks.
    • App Config: View your application configuration.

  3. Introduction to Nuxt Scripts

    main

    Nuxt Scripts is a module designed to manage and optimize third-party scripts in Nuxt applications. It aims to solve common issues associated with third-party providers, including:

    • Performance: Reducing interference with the hydration process and improving Core Web Vitals (like INP and LCP) by preventing third-party scripts from blocking the main thread.
    • Privacy & Security: Helping developers manage data leakage (e.g., tracking IDs in external cookies) and addressing security concerns like the lack of integrity hashes in many third-party scripts.
    • Developer Experience: Providing a cleaner API to avoid common pitfalls such as SSR safety issues, script timing/loading race conditions, and broken TypeScript definitions for the window object.

  4. Overview of the Nuxt Design System

    main

    The Nuxt design system is a developer-focused aesthetic powered by Nuxt UI and Tailwind CSS v4. It uses CSS variables as design tokens and prioritizes semantic colors over hardcoded hex values.

    Key Principles:

    • Dark mode is the default theme.
    • Use color to signal state or hierarchy, not to fill space.
    • Prioritize readability, accessibility (WCAG AA contrast), and clarity.
    • Use semantic aliases (e.g., primary, neutral) instead of raw hex codes.
    • Avoid hardcoding brand colors like #00DC82; use text-primary or color="primary" instead.

  5. Overview of Nuxt Icon v1

    main

    Nuxt Icon v1 is a modern icon solution designed specifically for Nuxt projects. It aims to balance performance, usability, and flexibility by addressing the core challenges of icon rendering: colorability, scalability, manageability, efficient bundling, optimal loading, and dynamic support.

    Unlike traditional methods that rely solely on one approach (like pure SVG components or pure CSS), Nuxt Icon v1 utilizes Dual Rendering Modes to bridge the gap between static and dynamic icon requirements. This allows it to support both build-time bundled icons and runtime-fetched dynamic icons (e.g., from Nuxt Content) while maintaining SSR compatibility and high performance.

  6. Explore Nuxt DevTools features

    main

    Nuxt DevTools provides several specialized views to inspect your application:

    • Overview: Shows Nuxt version, pages, components, modules, and plugins. It includes a one-click upgrade feature for Nuxt.
    • Pages: Displays current routes. For dynamic routes, it provides an interactive form to fill parameters and test route matching.
    • Components: Lists all components, their origins, and a graph view of their relationships. Includes an Inspector to click DOM elements and jump directly to the source code in your editor.
    • Imports: Shows all auto-imports, which files use them, and their origins.
    • Modules: Lists installed modules with links to documentation and source code. Includes an experimental upgrade feature for modules.
    • Assets: Shows static assets with options to copy paths or code snippets.
    • Plugins: Lists active plugins and their execution time to help identify performance bottlenecks.
    • Hooks: Monitors time spent in client and server-side hooks, including listener counts and invocation frequency.
    • App Config: Allows inspecting and modifying appConfig reactively to see immediate effects.
    • Payload & Data: Inspects state from useState, useAsyncData, and useFetch. You can manually trigger refetches for useAsyncData and useFetch.
    • Terminals: Provides isolated output for subprocesses used by various integrations.
    • Virtual Files: Shows virtual files generated by Nuxt and Nitro.
    • Inspect: Integrates vite-plugin-inspect to view Vite transformation steps.
    • VS Code: Integrates a full-featured VS Code instance within the browser via VS Code Server, allowing you to edit code and sync settings without leaving the browser.

  7. EpicMax Agency Services

    main

    EpicMax is a Vue and Nuxt development agency specializing in commercial and open-source projects, long-term support, and migrations to Vue 3 and Nuxt 3. They offer the following service models:

    • Vue Power Team: Dedicated frontend experts provided via flexible engagement with predictable monthly costs.
    • Vue Power Projects: End-to-end delivery for projects with a defined scope, fixed timelines, and fixed budgets.
    • Vue/Nuxt Code Audit: A technical health check to identify performance bottlenecks, security risks, and scalability issues, resulting in an actionable report.
    • Consulting from Our CTO: Strategic guidance on architecture, scalability, and workflow improvements.

  8. What is the Model Context Protocol (MCP)?

    main

    The Model Context Protocol (MCP) is an open standard that allows AI assistants to securely access data and tools via structured, semantic data rather than generic HTML or JSON. It uses three main primitives:

    • Resources: Data that provides context to language models (e.g., files, database schemas) identified by a unique URI.
    • Tools: Operations that allow AI models to interact with external systems (e.g., performing searches or API calls).
    • Prompts: Reusable prompt templates with arguments that guide AI workflows.

    Unlike traditional RAG (Retrieval-Augmented Generation), MCP provides structured data, composable tools that can be chained, and direct access to content layers without the need for manual reindexing.

  9. What is Nuxi and how does it work?

    main

    Nuxi is the Nuxt AI agent integrated into nuxt.com. It serves as a personalized companion to improve developer experience by providing context-aware assistance.

    Key characteristics include:

    • Context-aware: Nuxi understands the page you are currently viewing. You can ask questions like "how do I use this in my app?" while reading documentation, and it will understand the context of the current page.
    • Grounded: It uses the Nuxt MCP server to find answers from official Nuxt docs, the modules catalog, templates, changelogs, and GitHub issues (across nuxt, nuxt-modules, and nuxt-content).
    • Rich UI: Instead of plain text, Nuxi renders interactive components such as module cards, template cards, hosting provider cards, and blog posts. It can also spin up StackBlitz playgrounds directly from a conversation.
    • Model: It runs on Anthropic's Claude Sonnet 4.6 via the Vercel AI Gateway.

  10. Get type-safe ESLint rules with @nuxt/eslint

    main
    The @nuxt/eslint module includes integrated support for eslint-typegen. This provides TypeScript type checking and autocomplete for your ESLint rule configurations in your editor (like VS Code). This ensures that the options you provide for specific rules are accurate and up-to-date based on the plugins you are actually using.

  11. Use Facade Components for performance

    main

    Facade components (e.g., ScriptYouTubePlayer, ScriptGoogleMaps) are "fake" components that act as placeholders and only hydrate when the actual third-party script loads. This significantly improves page load performance.

    Facade components are accessible and headless (unstyled), meaning they provide necessary accessibility data but require you to provide your own styling. You can use slots like #awaitingLoad to show a placeholder while the script is loading.

    <script setup lang="ts">
const isLoaded = ref(false)
const isPlaying = ref(false)
const video = ref()
function play() {
  video.value?.player.playVideo()
}
function stateChange(state) {
  isPlaying.value = state.data === 1
}
</script>

<template>
  <ScriptYouTubePlayer 
    ref="video" 
    video-id="d_IFKP1Ofq0" 
    @ready="isLoaded = true" 
    @state-change="stateChange"
  >
    <template #awaitingLoad>
      <!-- Your loading placeholder UI -->
      <div class="loading-spinner">...</div>
    </template>
  </ScriptYouTubePlayer>
</template>

  12. Compare `asyncData` vs `fetch`

    main

    While both are used for data fetching, they serve different purposes and have different constraints:

    FeatureasyncData
    ScopePage-level components only
    Contextthis is unavailable (uses context argument)
    Data HandlingReturns an object that is merged with local data
    Implementationreturn { key: value }
    Featurefetch
    ScopeAll Vue components (Pages, Layouts, Components)
    Contextthis is available
    Data HandlingMutates local data directly
    Implementationthis.key = value