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 4 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 well-known and core characteristic. It enables you to freely choose the appropriate rendering policy based on project requirements without the need to rewrite a large number of code.
File-based routing: Nuxt automatically generates the routing configuration for your application 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 from a Git repository.
Select the 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+. The latest version of Nuxt 4 is recommended. The following table lists the key characteristics of Nuxt currently supported by Pages as follows:
Nuxt Feature | Support Status |
Server-side rendering (SSR) | ✓ |
Static site generation (SSG) | ✓ |
Incremental static generation (ISR/SWR) | ✓ |
Middleware | ✓ |
Streaming | ✓ |
Layer | Not supported. |
@nuxt/image | Optimization not supported, unaffected normal image rendering |
Deploying a Nuxt Project on Pages
Git Connection Deployment
After seamless integration with the adapter, you can submit the project to platforms such as GitHub and GitLab, and use our provided import Git repository.
CLI Deployment
You can also install the scaffolding tool for Pages. For detailed installation and usage, see EdgeOne CLI. Once configured, use the
edgeone pages deploy command to deploy the project. During deployment, the CLI will first auto-build the project, then upload and publish the build artifacts.Note:
EdgeOne CLI version requirement ≥ 1.2.4. Please first check 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 only gets data 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, which begins from the application entry, recursively accesses ALL internal links, and pre-renders each accessible webpage as 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 that match specific path modes.export default defineNuxtConfig({routeRules: {'/about': {prerender: true},'/test/:id': {prerender: true}}})
Incremental Static Generation (ISR/SWR)
Except for full static pre-rendering, Nuxt also provides incremental static generation (ISR) through its powerful server engine Nitro, enhancing static performance and data timeliness. 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.
