DOCSEARCHbyAlgolia
Submit Docs

Nuxt v2 Documentation

website·Indexed 42 days ago

https://v2.nuxt.com/

Documentation and examples for Nuxt v2, featuring a components glossary (validate, layout, middleware), configuration options (ssr, target, build), and internals for programmatic usage like nuxt.render and the Builder class.

Tokens
68.3K
Snippets
454
Records
567
Agent score
72%

What's inside Nuxt

  1. Overview of Nuxt 2 Core Features

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

    • Zero Configuration: Allows developers to start coding immediately without extensive setup.
    • File-system Routing: Automatically generates routes and handles code-splitting based on the project's 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: Uses a standardized directory structure to facilitate efficient teamwork.
    • SEO Friendly: Includes tools for meta tag management and optimizes time-to-content for better search engine indexing.
    • Components Auto-import: Automatically imports components with smart code-splitting, removing the need for manual import statements.
    • Modules Ecosystem: Access to over 160 modules to extend application functionality.

  2. Overview of Static Site Generation (SSG) in Nuxt 2

    Static Site Generation allows you to render your application during the build phase and deploy it to static hosting services (e.g., Netlify, GitHub Pages, Vercel) without requiring a server. When using target: 'static', Nuxt generates all .vue pages into HTML and JavaScript files. API calls made during the build are cached in a static folder within the generated content, eliminating the need for client-side API calls during navigation.

  3. Overview of the ModuleContainer class

    In Nuxt 2, all modules are executed within the context of a ModuleContainer instance. This class provides a set of utility methods and hooks that allow modules to interact with the Nuxt build process, register plugins, and extend the Webpack configuration.

  4. Overview of Nuxt 2 Runtime Config

    Introduced in Nuxt v2.13, runtime configuration provides built-in dotenv support and a way to manage environment variables without requiring a full rebuild for changes (except for static sites). Configuration is accessed via the $config object from the Nuxt context. It separates variables into public and private scopes to prevent sensitive secrets from being exposed to the browser.

  6. Compare Nuxt data fetching hooks: asyncData vs fetch

    Nuxt provides two primary hooks for asynchronous data loading to ensure pages render with required data during server-side rendering (SSR):

    • asyncData: Available only on page components. It blocks route navigation until resolved. If it fails, it displays a page error. It does not show a loading placeholder during client-side navigation.
    • fetch (Nuxt 2.12+): Available on any component. It provides built-in shortcuts for rendering loading states and errors during client-side rendering without blocking navigation.

  7. Understand Nuxt v2 middleware execution and directory structure

    The middleware/ directory is used to define custom functions that run before rendering a page or layout. Middleware receives the Nuxt context as its first argument. In universal mode, middleware runs on the server for the initial request and on the client for subsequent navigations. If ssr: false, it runs on the client in both cases. Middleware executes in the following sequence: 1. nuxt.config.js (in order of definition), 2. Matched layouts, 3. Matched pages.
    // Example: middleware/user-agent.js
export default function (context) {
  context.userAgent = process.server
    ? context.req.headers['user-agent']
    : navigator.userAgent
}

  8. Manage application routes using the pages directory

    The pages directory contains Application Views and Routes. Nuxt automatically reads all .vue, .js, and .ts files in this directory to generate the router configuration. Each file corresponds to a route in the application.

  9. Understand Nuxt Module fundamentals

    Nuxt modules are functions executed sequentially during the Nuxt boot process. The framework waits for each module to complete before proceeding, allowing modules to customize nearly any aspect of a Nuxt project.

  11. Configure HTML file structure with generate.subFolders

    By default, generate.subFolders is true, meaning Nuxt creates a directory for each route and places an index.html inside (e.g., /about/index.html). Setting this to false generates HTML files directly according to the route path (e.g., /about.html).
    export default {
  generate: {
    subFolders: false
  }
}

  12. Understand the Nuxt Context object

    The context object provides additional Nuxt-specific objects and parameters to Vue components. It is available in specific Nuxt lifecycle areas, including asyncData, fetch, plugins, middleware, and the nuxtServerInit action. Note that this is distinct from the context object used in Vuex Actions.
    function (context) {
  // Universal keys
  const { app, store, route, params, query, env, isDev, isHMR, redirect, error, $config } = context

  // Server-side only
  if (process.server) {
    const { req, res, beforeNuxtRender } = context
  }

  // Client-side only
  if (process.client) {
    const { from, nuxtState } = context
  }
}