# Static Site Generator Nuxt.js ## Overview Nuxt.js is a Vue.js-based full-stack framework that also provides powerful SSG (Static Site Generation) capabilities. With over 46k GitHub stars, it offers high performance through compile-time optimization and flexible rendering modes including SSG, SSR, and SPA. ## Details Nuxt.js has established itself as the de facto standard in the Vue.js ecosystem, supporting multiple rendering strategies including static site generation. Powered by Nitro as the build engine, it delivers outstanding performance and developer experience. ### Key Features #### 1. Multiple Rendering Modes - **Static Generation (SSG)**: Pre-render pages at build time using `nuxt generate` - **Server-Side Rendering (SSR)**: Dynamic server rendering - **Single Page Application (SPA)**: Client-side only rendering - **Hybrid Rendering**: Mix different rendering strategies per route #### 2. Vue.js-Powered Development - **Auto-imports**: Automatic importing of components, composables, and utilities - **File-based Routing**: Automatic route generation based on directory structure - **TypeScript Support**: First-class TypeScript integration with auto-generated types #### 3. Performance Optimization - **Nitro Engine**: Ultra-fast build system and server engine - **Code Splitting**: Automatic code splitting for optimal loading - **SEO-friendly**: Built-in meta tags management and structured data support - **Image Optimization**: Advanced image processing capabilities #### 4. Developer Experience - **Vue DevTools**: Integrated Vue.js DevTools support - **Hot Module Replacement**: Fast development with instant updates - **Extensive Modules**: Rich ecosystem of official and community modules ## Pros and Cons ### Pros - **Vue.js Ecosystem Integration**: Seamless integration with Vue.js libraries and tools - **Flexible Rendering**: Support for SSG, SSR, SPA, and hybrid approaches - **Performance**: Excellent build speed and runtime performance with Nitro - **Developer Experience**: Outstanding DX with auto-imports and file-based routing - **Module Ecosystem**: Rich collection of official and community modules - **TypeScript Support**: Excellent TypeScript experience with auto-generated types ### Cons - **Vue.js Dependency**: Limited to Vue.js ecosystem (not framework-agnostic) - **Learning Curve**: Requires understanding of Vue.js concepts and Nuxt conventions - **Build Complexity**: More complex than simple SSGs for basic use cases - **Memory Usage**: Higher memory consumption during development ## Reference Pages - [Official Website](https://nuxt.com/) - [Documentation](https://nuxt.com/docs) - [GitHub Repository](https://github.com/nuxt/nuxt) - [Modules Directory](https://nuxt.com/modules) - [Examples](https://nuxt.com/docs/examples) ## Code Examples ### 1. Basic Setup and Configuration **Installing Nuxt.js** ```bash # Create a new Nuxt project npx nuxi@latest init my-nuxt-app cd my-nuxt-app # Install dependencies npm install # Start development server npm run dev ``` **nuxt.config.ts for SSG** ```typescript export default defineNuxtConfig({ // Enable static site generation nitro: { prerender: { routes: ['/sitemap.xml'] } }, // SEO configuration app: { head: { title: 'My Nuxt SSG Site', meta: [ { name: 'description', content: 'My static site built with Nuxt.js' } ] } }, // Enable TypeScript strict mode typescript: { strict: true } }) ``` ### 2. Pages and Routing **pages/index.vue** ```vue <template> <div> <h1>{{ data.title }}</h1> <p>{{ data.content }}</p> <NuxtLink to="/about">About</NuxtLink> </div> </template> <script setup> // Enable prerendering for this page definePageMeta({ prerender: true }) // Fetch data at build time for SSG const { data } = await $fetch('/api/content') // SEO meta tags useSeoMeta({ title: 'Home Page', description: 'Welcome to my Nuxt.js site' }) </script> ``` **pages/blog/[slug].vue** ```vue <template> <article> <h1>{{ post.title }}</h1> <p>{{ post.content }}</p> </article> </template> <script setup> const route = useRoute() const { data: post } = await $fetch(`/api/posts/${route.params.slug}`) // Generate static routes for all blog posts export async function getStaticPaths() { const posts = await $fetch('/api/posts') return posts.map(post => ({ params: { slug: post.slug } })) } </script> ``` ### 3. Server API Routes **server/api/posts/index.get.ts** ```typescript export default defineEventHandler(async (event) => { // This API will be prerendered for SSG const posts = [ { id: 1, slug: 'first-post', title: 'First Blog Post', content: 'This is my first post content...' }, { id: 2, slug: 'second-post', title: 'Second Blog Post', content: 'This is my second post content...' } ] return posts }) ``` ### 4. Static Generation Commands **package.json scripts** ```json { "scripts": { "dev": "nuxt dev", "build": "nuxt build", "generate": "nuxt generate", "preview": "nuxt preview" } } ``` **Generate static site** ```bash # Generate static files npm run generate # Preview generated site npm run preview # Build for SSG with custom configuration npx nuxt generate --preset=static ``` ### 5. Advanced Configuration **nuxt.config.ts with advanced SSG settings** ```typescript export default defineNuxtConfig({ // Static site generation configuration nitro: { prerender: { // Prerender specific routes routes: ['/sitemap.xml', '/robots.txt'], // Ignore certain routes from prerendering ignore: ['/admin', '/api/dynamic'] } }, // Route rules for hybrid rendering routeRules: { // Homepage prerendered at build time '/': { prerender: true }, // Blog posts use ISR (generated on-demand, cached) '/blog/**': { isr: true }, // Admin pages are SPA only '/admin/**': { ssr: false } }, // Modules for enhanced functionality modules: [ '@nuxt/content', // Content management '@nuxt/image', // Image optimization '@nuxtjs/sitemap' // Sitemap generation ] }) ``` ### 6. Content Management with Nuxt Content **Install and configure Nuxt Content** ```bash npm install @nuxt/content ``` **content/blog/hello-world.md** ```markdown --- title: Hello World description: My first blog post date: 2024-01-01 --- # Hello World This is my first blog post written in Markdown. ``` **pages/blog/index.vue** ```vue <template> <div> <h1>Blog Posts</h1> <article v-for="post in posts" :key="post._path"> <NuxtLink :to="post._path"> <h2>{{ post.title }}</h2> <p>{{ post.description }}</p> </NuxtLink> </article> </div> </template> <script setup> // Query content at build time const { data: posts } = await queryContent('/blog').find() </script> ```