DOCSEARCHbyAlgolia
Submit Docs

Nuxt 2 Documentation

website·Indexed 30 days ago

https://nuxt2.unibox.top

Documentation and examples for Nuxt 2, covering server-side rendering (SSR), the Nuxt lifecycle, routing, middleware, and component properties such as layout, validate, and head. Includes guides on customizing loading indicators, using the $nuxt helper, and programmatic rendering with nuxt.render().

Tokens
144.9K
Snippets
941
Records
1.2K
Agent score
45%

What's inside Nuxt 2

  1. Overview of Nuxt 2 Core Features

    Nuxt 2 is an open-source framework for building Vue.js applications. It provides several built-in features to improve developer productivity and end-user experience:

    • Zero Configuration: Allows developers to start writing application code immediately without extensive setup.
    • File-System Routing: Automatically generates routes and implements code splitting based on the project's file structure.
    • Hybrid Rendering: Supports switching between Static Site Generation (SSG) and on-demand Server-Side Rendering (SSR).
    • Data Fetching: Enables fetching content from any data source within SSR-supported Vue components.
    • Strong Conventions: Uses a standardized directory structure to facilitate efficient team collaboration.
    • SEO Optimization: Provides meta tag management and high indexability for faster content delivery.
    • Automatic Component Imports: Intelligently imports components with automatic code splitting when they are used.
    • Module Ecosystem: Extensible via over 160 community and official modules.

  2. Overview of Nuxt 2 Runtime Configuration

    Introduced in Nuxt v2.13, runtime configuration provides a more secure and flexible way to handle environment variables. Unlike the env property, runtime config is added to the Nuxt payload, meaning updates to configuration do not require a full rebuild for server-side rendered (SSR) or single-page applications (SPAs). However, static sites still require regeneration to reflect changes. Configuration is accessed via the $config object from the Nuxt context.

  3. Overview of the Nuxt 2 ModuleContainer class

    The ModuleContainer class provides the execution context for all Nuxt modules. It contains utility methods to modify the build process, register templates, and add plugins. Modules can access this container via this within a module function or via nuxt.moduleContainer.

  4. Overview of Nuxt 2 Framework Features

    Nuxt 2 is an open-source framework for building Vue 2 applications. It provides a structured developer experience with the following core capabilities:

    • Zero Configuration: Allows developers to start coding immediately without extensive setup.
    • File-system Routing: Automatically generates routes and handles code-splitting based on the file structure.
    • Rendering Modes: Supports both static-site generation (SSG) and on-demand server-side rendering (SSR).
    • Data Fetching: Provides SSR-ready methods to fetch content from any source within Vue components.
    • Strong Conventions: Enforces a consistent directory structure to improve teamwork and maintainability.
    • SEO Optimization: Simplifies meta tag management to improve indexing and time-to-content.
    • Components Auto-import: Automatically imports components with smart code-splitting, removing the need for manual import statements.
    • Modules Ecosystem: Access to over 160 official and community modules to extend application functionality.

  5. Overview of @nuxt/content module

    The @nuxt/content module allows Nuxt applications to use the content/ directory as a Git-based headless CMS. It supports Markdown, JSON, YAML, and CSV files, providing a MongoDB-like API to fetch and query this content.

  6. Overview of Nuxt 2 Runtime Configuration

    Introduced in Nuxt v2.13, runtime configuration provides a way to manage environment variables with better security and without requiring a full rebuild to update values (except for static sites). Configuration is accessed via the $config object from the Nuxt context. It consists of two main properties in nuxt.config.js:

    • publicRuntimeConfig: Contains variables exposed to both the client and server (e.g., public API URLs).
    • privateRuntimeConfig: Contains sensitive variables exposed ONLY on the server (e.g., API secret tokens).

    On the server, $config is a merge of both public and private configs (private overrides public). On the client, $config only contains the public configuration.

    // nuxt.config.js
export default {
  publicRuntimeConfig: {},
  privateRuntimeConfig: {}
}

  7. Overview of Nuxt 2 Internal Architecture

    Nuxt uses a modular architecture that allows developers to extend the core. The internal system is divided into three main categories:

    1. Core: Classes required for both runtime and build time, including Nuxt, Renderer, and ModuleContainer.
    2. Build: Classes required only during build or development modes, specifically Builder and Generator.
    3. Public/Utils: Shared utilities and configuration options (Utils, Options).

  8. Overview of Server-Side Rendering (SSR) in Nuxt

    Server-Side Rendering (SSR) allows Nuxt to render webpages on the server instead of the browser. The server sends a fully rendered HTML page to the client, which is then taken over by the JavaScript bundle to allow the Vue.js application to undergo hydration, making the page interactive.

  10. Overview of Nuxt 3 core features and foundation

    Nuxt 3 is built on a new foundation that supports Vue 3 and Vite. It introduces a new server engine (Nitro) that enables full-stack capabilities and makes the application server portable across various modern cloud hosting providers. In production, Nuxt 3 builds the Vue application and server into a single, minified .output directory without Node.js dependencies (except polyfills), allowing deployment to Node.js, Serverless, Workers, Edge-side rendering, or purely static environments.

  11. Understand the Nuxt project directory structure

    Nuxt uses a specific directory structure to enable automatic features. Creating directories with these specific names activates the corresponding Nuxt functionality.
    mkdir components assets static
touch nuxt.config.js

  12. Understand Static Site Generation (SSG) in Nuxt 2

    Static Site Generation (SSG) allows an application to be rendered during the build phase and deployed to static hosting services like Netlify, GitHub Pages, or Vercel, eliminating the need for a server during deployment. When using target: 'static', all .vue pages are generated as HTML and JavaScript files. API calls are cached into a static folder within the generated content, ensuring that client-side navigation does not require additional API requests.