Nuxt
Nuxt is a development framework that helps you build fast, powerful, and search engine-friendly websites with Vue.js.
Note:
Currently, Pages supports Nuxt version 3.16.0+. The latest Nuxt is recommended.
Core Features
The core feature of Nuxt can be summarized as the principle of "convention over configuration". Under this principle, it provides developers with a complete solution designed to enhance development experience and optimize application performance. This includes:
Multiple rendering modes: This is Nuxt's most famous and core feature. It allows you to freely choose the most appropriate rendering strategy based on project requirements without the need to rewrite a large number of code.
File-based routing: Nuxt will automatically generate the application's routing configuration based on the Vue file structure under the pages/ directory.
Powerful data access: To cooperate with server-side rendering, Nuxt provides specialized Composables to handle data access.
Automatic import: Nuxt automatically imports components, composables, and plug-ins defined in a specific directory. Developers can use components and functions directly in any .vue file without manual import.
Server Engine Nitro: This is the "heart" of Nuxt 3/4, a brand new, high performance server engine.
Quick Start
Deploy a Nuxt project on EdgeOne Pages quickly in the following ways:
Import a Nuxt project via Git repository
Select a Nuxt template from the Pages template library to deploy
Learn about Nuxt deployment performance on Pages. Click the sample template below:
Nuxt Feature Support on Pages
Pages supports deploying Nuxt 3.16.0+, but the latest version of Nuxt 4 is recommended. The following table lists the key characteristics currently supported by Pages for Nuxt:
Nuxt Feature | Support Status |
Server-side rendering (SSR) | ✅ |
Static site generation (SSG) | ✅ |
Incremental static generation (ISR/SWR) | ✅ |
Middleware | ✅ |
Streaming | ✅ |
Layers | Not supported. |
@nuxt/image | Optimization not supported, unaffected normal image rendering |
Deploying a Nuxt Project on Pages
Git Connection Deployment
You can submit the project to platforms such as GitHub and GitLab, and use our Git Connection Deployment.
CLI Deployment
You can also install the Pages scaffolding tool. For detailed installation and usage, refer to EdgeOne CLI. Once configured, use the
edgeone pages deploy command to deploy the project. During deployment, the CLI will first automatically build the project, then upload and publish the build artifacts.Note:
EdgeOne CLI version requirement ≥ 1.2.4. Please first check the version before deployment to avoid deployment failure.
Server-Side Rendering (SSR)
Server-side rendering allows you to dynamically render webpages on servers. Every time users initiate requests, the server retrieves data and generates HTML, improving SEO and the first-screen loading experience. SSR is used by default in the Nuxt framework.
In
<script>, you can use Nuxt's data request functions without additional imports. Nuxt provides two composable modules and a built-in library for data fetching in browser or server environments: useFetch, useAsyncData, and $fetch.
$fetch is the simplest method to initiate a network request.
useFetch is a wrapper around $fetch that fetches data only once in common rendering.
useAsyncData is a common asynchronous task processor that seamlessly integrates any asynchronous operation (such as API request, database query, or complex calculation) into Nuxt's rendering lifecycle, with automatic handling of server-side rendering (SSR), client navigation, and status management.
// $fetch<script setup lang="ts">const headers = useRequestHeaders(['cookie'])async function getCurrentUser () {return await $fetch('/api/me', { headers })}</script>// useFetch<script setup lang="ts">const { data } = await useFetch('/api/echo')</script>// useAsyncData<script setup lang="ts">const { data, error } = await useAsyncData('users', () => myGetFunction('users'))// can be as followsconst { data, error } = await useAsyncData(() => myGetFunction('users'))</script>
Static Site Generation (SSG)
Nuxt provides powerful and flexible static site generation (SSG) capacity, supporting multiple policies from global pre-rendering to page-level granular control.
Global static generation is the most direct static method in Nuxt. By executing the build command
Nuxt generate, Nuxt's server engine Nitro starts a crawler, beginning from the application entry, recursively accesses all internal links, and pre-renders each accessible webpage into a static HTML file.
Page-level granular control (Hybrid Rendering) For more complex applications, you may want to implement hybrid rendering. This can be done by configuring routeRules in the
nuxt.config.ts file. routeRules allow you to declare rendering rules for routes matching specific path patterns.export default defineNuxtConfig({routeRules: {'/about': {prerender: true},'/test/:id': {prerender: true}}})
Incremental Static Generation (ISR/SWR)
In addition to full static pre-rendering, Nuxt also provides incremental static generation (ISR) capability through its powerful server engine Nitro. Its core implements the Stale-While-Revalidate (SWR) cache policy.
You can use routeRules in the
nuxt.config.ts file to precisely configure ISR/SWR behavior for specific routing modes.// nuxt.config.tsexport default defineNuxtConfig({routeRules: {// Enable SWR for the News Edition with a cache validity period of 5 minutes.// This means news content may have up to 5 minutes of delay, but page loading speed remains static.'/news/**': { swr: 300 },// For infrequently updated "about us" pages, cache time can be set longer, for example one day.'/about': { swr: 86400 } // 24 * 60 * 60}})
This approach is especially applicable to scenarios where content requires periodic updates but not real-timeness, such as product details pages on e-commerce websites, article pages on news portals, and data display pages dependent on external APIs.
More Resources
