Back to What is?
Educational Article

Nuxt.js is a powerful Vue.js framework that simplifies the development of universal Vue applications. It provides automatic code splitting, server-side rendering, static site generation, and a modular architecture for building modern web applications.

nuxtjsvue.jsframeworkssrssguniversal appweb developmentjavascriptfrontendseo

What is Nuxt.js?


Nuxt.js is a powerful Vue.js framework that simplifies the development of universal Vue applications. Created by Sébastien Chopin and Alexandre Chopin, Nuxt.js provides a robust foundation for building modern web applications with features like server-side rendering (SSR), static site generation (SSG), automatic code splitting, and a modular architecture.


Key Features

Free Tool

JSON Formatter

Format, validate, and beautify JSON with syntax highlighting

Try it free

Universal Applications

Nuxt.js enables you to build universal applications that work on both client and server sides.


javascriptCODE
// pages/index.vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Welcome to Nuxt.js',
      description: 'A powerful Vue.js framework'
    }
  }
}
</script>

Automatic Routing

Nuxt.js automatically creates routes based on your file structure in the pages directory.


bashCODE
pages/
├── index.vue          # / (home page)
├── about.vue          # /about
├── users/
│   ├── index.vue      # /users
│   └── _id.vue        # /users/:id
└── blog/
    ├── index.vue      # /blog
    └── _slug.vue      # /blog/:slug

Server-Side Rendering (SSR)

Nuxt.js provides built-in SSR capabilities for better SEO and performance.


javascriptCODE
// pages/users/_id.vue
<template>
  <div>
    <h1>User: {{ user.name }}</h1>
    <p>Email: {{ user.email }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ params, $axios }) {
    const user = await $axios.$get(`/api/users/${params.id}`)
    return { user }
  }
}
</script>

Rendering Modes


Universal Mode (SSR)

The default mode that renders pages on both server and client.


javascriptCODE
// nuxt.config.js
export default {
  ssr: true,  // Default - renders on server and client
  target: 'server'
}

Static Site Generation (SSG)

Generate static HTML files for deployment to CDNs.


javascriptCODE
// nuxt.config.js
export default {
  target: 'static',
  generate: {
    fallback: true  // Generate 404.html for SPA fallback
  }
}

// Generate static pages
// nuxt generate

Single Page Application (SPA)

Client-side only rendering for dynamic applications.


javascriptCODE
// nuxt.config.js
export default {
  ssr: false,
  target: 'static'
}

Core Concepts


Pages

Pages are Vue components that automatically become routes.


javascriptCODE
// pages/blog/_slug.vue
<template>
  <article>
    <h1>{{ post.title }}</h1>
    <div v-html="post.content"></div>
  </article>
</template>

<script>
export default {
  async asyncData({ params, $axios }) {
    const post = await $axios.$get(`/api/posts/${params.slug}`)
    return { post }
  },
  
  head() {
    return {
      title: this.post.title,
      meta: [
        { hid: 'description', name: 'description', content: this.post.excerpt }
      ]
    }
  }
}
</script>

Layouts

Layouts provide consistent page structure across your application.


javascriptCODE
// layouts/default.vue
<template>
  <div>
    <nav>
      <NuxtLink to="/">Home</NuxtLink>
      <NuxtLink to="/about">About</NuxtLink>
    </nav>
    
    <main>
      <Nuxt />  <!-- Page content goes here -->
    </main>
    
    <footer>
      <p>&copy; 2024 My App</p>
    </footer>
  </div>
</template>

Components

Auto-imported components for better development experience.


javascriptCODE
// components/UserCard.vue
<template>
  <div class="user-card">
    <img :src="user.avatar" :alt="user.name">
    <h3>{{ user.name }}</h3>
    <p>{{ user.email }}</p>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      required: true
    }
  }
}
</script>

// Use anywhere without importing
<template>
  <div>
    <UserCard :user="currentUser" />
  </div>
</template>

Data Fetching


asyncData

Fetch data on the server side before rendering.


javascriptCODE
export default {
  async asyncData({ $axios, params }) {
    const [user, posts] = await Promise.all([
      $axios.$get(`/api/users/${params.id}`),
      $axios.$get(`/api/users/${params.id}/posts`)
    ])
    
    return { user, posts }
  }
}

fetch

Fetch data on both server and client sides.


javascriptCODE
export default {
  data() {
    return {
      posts: []
    }
  },
  
  async fetch() {
    this.posts = await this.$axios.$get('/api/posts')
  }
}

Composition API (Nuxt 3)

Modern Vue 3 Composition API for data fetching.


javascriptCODE
// Nuxt 3 with Composition API
<script setup>
const { data: posts } = await useFetch('/api/posts')
const { data: user } = await useLazyFetch('/api/user')
</script>

Modules System


Built-in Modules

Nuxt.js comes with essential modules pre-configured.


javascriptCODE
// nuxt.config.js
export default {
  modules: [
    '@nuxtjs/axios',      // HTTP client
    '@nuxtjs/pwa',        // Progressive Web App
    '@nuxtjs/auth',       // Authentication
    '@nuxtjs/i18n'        // Internationalization
  ],
  
  axios: {
    baseURL: 'https://api.example.com'
  },
  
  pwa: {
    manifest: {
      name: 'My Nuxt App',
      short_name: 'NuxtApp'
    }
  }
}

Custom Modules

Create reusable modules for your application.


javascriptCODE
// modules/my-module.js
export default function (moduleOptions) {
  // Add plugin
  this.addPlugin({
    src: require.resolve('./plugin.js'),
    options: moduleOptions
  })
  
  // Add server middleware
  this.addServerMiddleware({
    path: '/api',
    handler: '~/server-middleware/api.js'
  })
}

// nuxt.config.js
export default {
  modules: [
    '~/modules/my-module'
  ],
  
  myModule: {
    // module options
  }
}

SEO and Meta Tags


Dynamic Meta Tags

Set meta tags dynamically for better SEO.


javascriptCODE
export default {
  head() {
    return {
      title: this.post.title,
      meta: [
        { hid: 'description', name: 'description', content: this.post.excerpt },
        { hid: 'og:title', property: 'og:title', content: this.post.title },
        { hid: 'og:description', property: 'og:description', content: this.post.excerpt },
        { hid: 'og:image', property: 'og:image', content: this.post.image }
      ]
    }
  }
}

Structured Data

Add JSON-LD structured data for search engines.


javascriptCODE
export default {
  head() {
    return {
      script: [
        {
          type: 'application/ld+json',
          json: {
            '@context': 'https://schema.org',
            '@type': 'Article',
            headline: this.post.title,
            author: {
              '@type': 'Person',
              name: this.post.author
            }
          }
        }
      ]
    }
  }
}

Performance Optimization


Automatic Code Splitting

Nuxt.js automatically splits your code for optimal loading.


javascriptCODE
// Automatic route-based code splitting
// Each page is loaded only when needed

// Manual code splitting
const MyComponent = () => import('~/components/MyComponent.vue')

Image Optimization

Optimize images with the @nuxt/image module.


javascriptCODE
// nuxt.config.js
export default {
  modules: ['@nuxt/image'],
  
  image: {
    provider: 'ipx',
    quality: 80
  }
}

// Usage
<template>
  <nuxt-img src="/image.jpg" width="300" height="200" />
</template>

Getting Started


Installation

bashCODE
# Create new Nuxt.js project
npx create-nuxt-app my-nuxt-app

# Or with yarn
yarn create nuxt-app my-nuxt-app

# Manual installation
npm install nuxt

Basic Setup

javascriptCODE
// nuxt.config.js
export default {
  // Global page headers
  head: {
    title: 'My Nuxt App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  },

  // Global CSS
  css: [
    '~/assets/css/main.css'
  ],

  // Plugins
  plugins: [
    '~/plugins/axios.js'
  ],

  // Auto import components
  components: true,

  // Build Configuration
  build: {
    // You can extend webpack config here
  }
}

Development Commands

bashCODE
# Development server
npm run dev

# Build for production
npm run build

# Start production server
npm run start

# Generate static site
npm run generate

Best Practices


Project Structure

  • Keep pages simple and focused
  • Use layouts for common UI elements
  • Organize components by feature
  • Use middleware for authentication and validation

    • Performance

  • Use lazy loading for heavy components
  • Optimize images and assets
  • Implement proper caching strategies
  • Monitor Core Web Vitals

    • SEO

  • Set proper meta tags for each page
  • Use structured data when appropriate
  • Implement proper sitemaps
  • Optimize for Core Web Vitals

    • Nuxt.js has become a popular choice for Vue.js developers, offering a comprehensive framework that simplifies the development of modern web applications while providing excellent performance and SEO capabilities.

    Related Tools

    JSON Formatter

    Format, validate, and beautify JSON with syntax highlighting

    Developer Tools

    Meta Tag Extractor

    Extract and analyze meta tags from any website

    Web Analysis

    Social Media Preview

    See how your URLs appear on Facebook, Twitter, LinkedIn

    Web Analysis

    Website Speed Tester

    Get real Lighthouse scores and performance insights

    Web Analysis

    Related Articles

    Educational

    What is Angular?

    Angular is a comprehensive web application framework developed by Google that enables building dynamic, single-page applications. Known for its powerful features, TypeScript integration, and enterprise-grade architecture.

    Educational

    What is JavaScript?

    Learn about JavaScript, the programming language that makes websites interactive and dynamic.

    Educational

    What is Next.js?

    Next.js is a powerful React framework that simplifies building production-ready web applications with features like server-side rendering, static site generation, and automatic code splitting.