Nuxt Hello World

Within the Vue ecosystem, Nuxt stands out as the premier full-stack application framework. By building upon Vue, it seam

Within the Vue ecosystem, Nuxt stands out as the premier full-stack application framework. By building upon Vue, it seamlessly integrates build tooling, flexible rendering modes, file-system routing, and robust server-side capabilities, empowering developers to ship production-ready applications with minimal configuration. This guide will walk you through building your very first Nuxt "Hello World" project while establishing a solid foundational understanding of its core design philosophy.

Nuxt can be thought of as an engineering enhancement layer for Vue. When working with vanilla Vue, you typically have to manually assemble Vite, Vue Router, state management, and SSR renderers. Nuxt unifies these essential capabilities into an out-of-the-box, convention-driven experience. Its standout features include:

  • Versatile Rendering Modes: Native support for Server-Side Rendering (SSR), Static Site Generation (SSG), traditional Client-Side SPA, and hybrid rendering on a per-route basis.
  • Convention-Driven Structure: Your directory layout dictates functionality; for instance, files placed inside the pages/ directory automatically map to application routes without manual route table configuration.
  • Auto-Imports: Components and commonly used APIs are imported automatically, significantly reducing boilerplate code.
  • Built-in Server Capabilities: The server/ directory allows you to write backend endpoints directly within your project, enabling seamless full-stack development in a single repository.
  • Rich Ecosystem: Authentication modules, CMS integrations, and styling solutions can be plugged in effortlessly.
    Dimension Pure Vue (Vite SPA) Nuxt
    Rendering Client-side rendering, prone to initial blank screens Default SSR, delivering fully rendered HTML instantly
    SEO Requires extra configuration or plugins Inherently optimized for search engine crawlers
    Routing Manual installation and setup File-system based routing out of the box
    Backend APIs Requires a separate backend project Direct backend logic within the framework

It is worth noting that advanced concepts like routing rules, layouts, and data-fetching strategies (such as utilizing useAsyncData) are extensive topics best explored separately. Here, our goal is to build a high-level conceptual framework before diving into deeper details in future articles.

Creating Your First Project

Make sure you have Node.js version 18 or higher installed on your system. Run the following commands in your terminal:

npx nuxi@latest init hello-nuxt
cd hello-nuxt
npm install

The CLI will prompt you to choose your preferred package manager and ask whether you want to initialize a Git repository. Make your selections based on your workflow.

Writing Hello World

Inside the root directory of your newly created project, you will find an app.vue file. This serves as the primary entry point of your application. Open it and update its content as follows:

<template>
  <div>
    <h1>Hello, Nuxt!</h1>
    <p>This is my first Nuxt application.</p>
  </div>
</template>

Once saved, this component renders immediately on the home page without requiring any manual route configurations. If you later decide to create a pages/ directory, Nuxt will automatically switch to file-system routing, with pages/index.vue taking over the root route—a prime example of "convention over configuration."

Launching and Verification

Start the development server with the following command:

npm run dev

Open your browser and navigate to http://localhost:3000 to view your Hello World page. If you inspect the page source, you will notice that the HTML already contains the complete rendered content rather than an empty mounting div—the most intuitive difference between SSR and SPA architectures.

Once your development is complete, you can build and preview your application for production using these commands:

npm run build    # Build the SSR application for production
npm run preview  # Locally preview the production build

If your target is a static site (such as documentation or a personal blog), you can run npm run generate to export static HTML files.

Project Structure at a Glance

As a beginner, you only need to focus on a few core directories and files:

  • app.vue: The main application entry component.
  • pages/: The views directory (activating file-system routing upon creation).
  • public/: Static assets served directly at the root URL.
  • server/: Backend code for creating server endpoints and API routes.
  • nuxt.config.ts: The global configuration file for defining modules and runtime settings.

Summary and Next Steps

In this guide, we successfully initialized a Nuxt project, wrote our first Hello World page, verified the development setup, and explored Nuxt's core advantages like flexible rendering and convention-based development. To continue your journey, we recommend exploring these subsequent topics:

  1. Routing and Middleware: Understand file-based routing, dynamic parameters, and navigation guards.
  2. Views Architecture: Master the hierarchical organization of pages, layouts, and components.
  3. Data Fetching: Learn how to handle data requests and state management in an SSR environment.

Once you master these sub-topics, you will be well-equipped to build clean, high-performance, full-stack applications with Nuxt independently.