Learn Nuxt-js - 10 Code Examples & CST Typing Practice Test

Nuxt.js is a high-level framework built on top of Vue.js for creating modern web applications with SSR, SSG, API integration, routing, performance optimizations, and full-stack capabilities using server routes. It emphasizes flexibility, DX, and hybrid rendering.

View all 10 Nuxt-js code examples →

Nuxt.js Counter with ref Nuxt.js Counter with localStorage Nuxt.js Counter using computed Nuxt.js Counter with composable Nuxt.js Counter with props Nuxt.js Counter with watchEffect Nuxt.js Counter with CSS variables Nuxt.js Counter with history Nuxt.js Counter with v-model binding Nuxt.js Counter with buttons map

Learn NUXT-JS with Real Code Examples

Updated Nov 22, 2025

Explain

Nuxt.js allows building scalable Vue applications with automatic routing, SSR, SSG, Edge rendering, and server API integration.

It simplifies Vue development by providing file-based routing, server utilities, and project conventions.

Nuxt supports hybrid rendering, static generation, middleware, and server APIs to power modern full-stack applications.

Core Features

SSR and SSG out of the box

Components auto-discovery

Server routes via Nitro

Middleware and composables

Layouts, pages, and hooks

Basic Concepts Overview

Pages & file-based routing

Layouts and middleware

Composables & auto-imports

Rendering modes (SSR/SSG/SPAs)

Server routes via Nitro

Project Structure

pages/ - file-based routing

components/ - auto-imported UI components

server/api/ - full-stack routes

composables/ - reusable logic

nuxt.config.ts - global config

Building Workflow

Create pages inside `/pages`

Write UI using Vue SFCs

Use composables for logic

Fetch server data via server routes

Deploy using Nitro adapters

Difficulty Use Cases

Beginner: static sites

Intermediate: SSR with composables

Advanced: APIs with Nitro

Expert: serverless multi-region apps

Community: Nuxt modules/plugins

Comparisons

More opinionated structure than Vue alone

More SEO-friendly than SPA Vue apps

More flexible full-stack features than older Nuxt 2

More module-rich than SvelteKit

More Vue-native than Next.js (React world)

Versioning Timeline

2016 - Nuxt.js initial release

2020 - Nuxt 2 maturity

2022 - Nuxt 3 stable release

2023 - Nitro 2 + Nuxt Islands

2024-2025 - Improved DX, modules, server actions

Glossary

Nitro: Nuxt’s server engine

Composable: Reusable composable logic

SSG: Static Site Generation

CSR: Client-side Rendering

Islands: Partial UI hydration

Code Sample Descriptions

Nuxt.js Counter with ref

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
    <button @click="count=0">Reset</button>
    <button @click="isDark = !isDark">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
const isDark = ref(false);
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Simple counter using Vue 3 ref and template binding.

Let’s Try →

Nuxt.js Counter with localStorage

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="reset">Reset</button>
    <button @click="toggleTheme">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
const count = ref(0);
const isDark = ref(false);

onMounted(() => {
  const savedCount = localStorage.getItem('count');
  if (savedCount) count.value = parseInt(savedCount, 10);
});

watch(count, (val) => localStorage.setItem('count', val));
const increment = () => count.value++;
const decrement = () => count.value--;
const reset = () => count.value=0;
const toggleTheme = () => isDark.value = !isDark.value;
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Counter persists value in localStorage.

Let’s Try →

Nuxt.js Counter using computed

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }} (Double: {{ doubleCount }})</h2>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
    <button @click="count=0">Reset</button>
    <button @click="isDark = !isDark">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
const isDark = ref(false);
const doubleCount = computed(() => count.value * 2);
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Counter displays double value using computed property.

Let’s Try →

Nuxt.js Counter with composable

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="reset">Reset</button>
    <button @click="toggleTheme">Switch Theme</button>
  </div>
</template>

<script setup>
import useCounter from '~/composables/useCounter';
const { count, isDark, increment, decrement, reset, toggleTheme } = useCounter();
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Uses a composable useCounter for reactive counter and theme.

Let’s Try →

Nuxt.js Counter with props

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
    <button @click="count=0">Reset</button>
    <button @click="isDark = !isDark">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({ initialCount: Number, dark: Boolean });
const count = ref(props.initialCount || 0);
const isDark = ref(props.dark || false);
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Accepts initial count and theme as props.

Let’s Try →

Nuxt.js Counter with watchEffect

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="reset">Reset</button>
    <button @click="toggleTheme">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref, watchEffect, onMounted } from 'vue';
const count = ref(0);
const isDark = ref(false);

onMounted(() => {
  const saved = localStorage.getItem('count');
  if (saved) count.value = parseInt(saved,10);
});

watchEffect(() => localStorage.setItem('count', count.value));
const increment = () => count.value++;
const decrement = () => count.value--;
const reset = () => count.value=0;
const toggleTheme = () => isDark.value = !isDark.value;
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Uses watchEffect to persist count automatically.

Let’s Try →

Nuxt.js Counter with CSS variables

<template>
  <div :style="{ '--bg': isDark ? '#222' : '#fff', '--fg': isDark ? '#eee' : '#000' }" class="container">
    <h2>Counter: {{ count }}</h2>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
    <button @click="count=0">Reset</button>
    <button @click="isDark = !isDark">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
const isDark = ref(false);
</script>

<style>
.container { background-color: var(--bg); color: var(--fg); min-height: 100vh; padding: 2rem; }
button { margin: 0 0.5rem; }
</style>

Uses CSS variables to dynamically change colors for theme.

Let’s Try →

Nuxt.js Counter with history

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <div>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
      <button @click="reset">Reset</button>
      <button @click="toggleTheme">Switch Theme</button>
    </div>
    <ul>
      <li v-for="(item,index) in history" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
const isDark = ref(false);
const history = ref([]);
const increment = () => { count.value++; history.value.push('Incremented to ' + count.value); };
const decrement = () => { count.value--; history.value.push('Decremented to ' + count.value); };
const reset = () => { count.value=0; history.value.push('Reset'); };
const toggleTheme = () => isDark.value = !isDark.value;
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Tracks counter history in an array.

Let’s Try →

Nuxt.js Counter with v-model binding

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <input type="number" v-model.number="count" />
    <button @click="count++">+</button>
    <button @click="count--">-</button>
    <button @click="count=0">Reset</button>
    <button @click="isDark = !isDark">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
const isDark = ref(false);
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Uses v-model for two-way binding of count prop.

Let’s Try →

Nuxt.js Counter with buttons map

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <div>
      <button v-for="action in actions" :key="action.label" @click="action.fn">{{ action.label }}</button>
    </div>
    <button @click="isDark = !isDark">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
const isDark = ref(false);
const actions = [
  { label: '+', fn: () => count.value++ },
  { label: '-', fn: () => count.value-- },
  { label: 'Reset', fn: () => count.value=0 }
];
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Generates buttons dynamically from an array of actions.

Let’s Try →

Frequently Asked Questions about Nuxt-js

What is Nuxt-js?

What are the primary use cases for Nuxt-js?

SEO-focused websites. Static or hybrid-rendered sites. Full-stack Vue apps with API routes. E-commerce and SaaS dashboards. Enterprise Vue applications

What are the strengths of Nuxt-js?

Outstanding developer experience. SEO-friendly SSR architecture. Large ecosystem of modules. Full-stack capabilities with Nitro. Stable and production-ready Vue foundation

What are the limitations of Nuxt-js?

More opinionated than basic Vue. SSR increases complexity. Cold starts may vary based on hosting. Learning curve for full-stack patterns. Less enterprise adoption vs Next.js

How can I practice Nuxt-js typing speed?

CodeSpeedTest offers 10+ real Nuxt-js code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Explain

Nuxt.js allows building scalable Vue applications with automatic routing, SSR, SSG, Edge rendering, and server API integration.

It simplifies Vue development by providing file-based routing, server utilities, and project conventions.

Nuxt supports hybrid rendering, static generation, middleware, and server APIs to power modern full-stack applications.

Code Sample Descriptions

Nuxt.js Counter with ref

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
    <button @click="count=0">Reset</button>
    <button @click="isDark = !isDark">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
const isDark = ref(false);
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Simple counter using Vue 3 ref and template binding.

Let’s Try →

Nuxt.js Counter with localStorage

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="reset">Reset</button>
    <button @click="toggleTheme">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
const count = ref(0);
const isDark = ref(false);

onMounted(() => {
  const savedCount = localStorage.getItem('count');
  if (savedCount) count.value = parseInt(savedCount, 10);
});

watch(count, (val) => localStorage.setItem('count', val));
const increment = () => count.value++;
const decrement = () => count.value--;
const reset = () => count.value=0;
const toggleTheme = () => isDark.value = !isDark.value;
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Counter persists value in localStorage.

Let’s Try →

Nuxt.js Counter using computed

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }} (Double: {{ doubleCount }})</h2>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
    <button @click="count=0">Reset</button>
    <button @click="isDark = !isDark">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
const isDark = ref(false);
const doubleCount = computed(() => count.value * 2);
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Counter displays double value using computed property.

Let’s Try →

Nuxt.js Counter with composable

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="reset">Reset</button>
    <button @click="toggleTheme">Switch Theme</button>
  </div>
</template>

<script setup>
import useCounter from '~/composables/useCounter';
const { count, isDark, increment, decrement, reset, toggleTheme } = useCounter();
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Uses a composable useCounter for reactive counter and theme.

Let’s Try →

Nuxt.js Counter with props

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
    <button @click="count=0">Reset</button>
    <button @click="isDark = !isDark">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({ initialCount: Number, dark: Boolean });
const count = ref(props.initialCount || 0);
const isDark = ref(props.dark || false);
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Accepts initial count and theme as props.

Let’s Try →

Nuxt.js Counter with watchEffect

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="reset">Reset</button>
    <button @click="toggleTheme">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref, watchEffect, onMounted } from 'vue';
const count = ref(0);
const isDark = ref(false);

onMounted(() => {
  const saved = localStorage.getItem('count');
  if (saved) count.value = parseInt(saved,10);
});

watchEffect(() => localStorage.setItem('count', count.value));
const increment = () => count.value++;
const decrement = () => count.value--;
const reset = () => count.value=0;
const toggleTheme = () => isDark.value = !isDark.value;
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Uses watchEffect to persist count automatically.

Let’s Try →

Nuxt.js Counter with CSS variables

<template>
  <div :style="{ '--bg': isDark ? '#222' : '#fff', '--fg': isDark ? '#eee' : '#000' }" class="container">
    <h2>Counter: {{ count }}</h2>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
    <button @click="count=0">Reset</button>
    <button @click="isDark = !isDark">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
const isDark = ref(false);
</script>

<style>
.container { background-color: var(--bg); color: var(--fg); min-height: 100vh; padding: 2rem; }
button { margin: 0 0.5rem; }
</style>

Uses CSS variables to dynamically change colors for theme.

Let’s Try →

Nuxt.js Counter with history

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <div>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
      <button @click="reset">Reset</button>
      <button @click="toggleTheme">Switch Theme</button>
    </div>
    <ul>
      <li v-for="(item,index) in history" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
const isDark = ref(false);
const history = ref([]);
const increment = () => { count.value++; history.value.push('Incremented to ' + count.value); };
const decrement = () => { count.value--; history.value.push('Decremented to ' + count.value); };
const reset = () => { count.value=0; history.value.push('Reset'); };
const toggleTheme = () => isDark.value = !isDark.value;
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Tracks counter history in an array.

Let’s Try →

Nuxt.js Counter with v-model binding

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <input type="number" v-model.number="count" />
    <button @click="count++">+</button>
    <button @click="count--">-</button>
    <button @click="count=0">Reset</button>
    <button @click="isDark = !isDark">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
const isDark = ref(false);
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Uses v-model for two-way binding of count prop.

Let’s Try →

Nuxt.js Counter with buttons map

<template>
  <div :class="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: {{ count }}</h2>
    <div>
      <button v-for="action in actions" :key="action.label" @click="action.fn">{{ action.label }}</button>
    </div>
    <button @click="isDark = !isDark">Switch Theme</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
const isDark = ref(false);
const actions = [
  { label: '+', fn: () => count.value++ },
  { label: '-', fn: () => count.value-- },
  { label: 'Reset', fn: () => count.value=0 }
];
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Generates buttons dynamically from an array of actions.

Let’s Try →

Frequently Asked Questions about Nuxt-js

What is Nuxt-js?

What are the primary use cases for Nuxt-js?

SEO-focused websites. Static or hybrid-rendered sites. Full-stack Vue apps with API routes. E-commerce and SaaS dashboards. Enterprise Vue applications

What are the strengths of Nuxt-js?

Outstanding developer experience. SEO-friendly SSR architecture. Large ecosystem of modules. Full-stack capabilities with Nitro. Stable and production-ready Vue foundation

What are the limitations of Nuxt-js?

More opinionated than basic Vue. SSR increases complexity. Cold starts may vary based on hosting. Learning curve for full-stack patterns. Less enterprise adoption vs Next.js

How can I practice Nuxt-js typing speed?

CodeSpeedTest offers 10+ real Nuxt-js code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Nuxt-js - 10 Code Examples & CST Typing Practice Test

Learn NUXT-JS with Real Code Examples

Explain

Core Features

Basic Concepts Overview

Project Structure

Building Workflow

Difficulty Use Cases

Comparisons

Versioning Timeline

Glossary

Installation Setup

Environment Setup

Config Files

Cli Commands

Internationalization

Accessibility

Ui Styling

State Management

Data Management

Architecture

Rendering Model

Architectural Patterns

Real World Architectures

Design Principles

Scalability Guide

Migration Guide

Performance Notes

Security Notes

Monitoring Analytics

Code Quality

Practical Examples

Troubleshooting

Testing Guide

Deployment Options

Tools Ecosystem

Integrations

Productivity Tips

Challenges

Learning Path

Skill Improvement Plan

Interview Questions

Cheat Sheet

Books

Tutorials

Official Docs

Community Links

Community Support

Monetization

Future Roadmap

When Not To Use

Final Summary

Faq

Code Sample Descriptions

Nuxt.js Counter with ref

Nuxt.js Counter with localStorage

Nuxt.js Counter using computed

Nuxt.js Counter with composable

Nuxt.js Counter with props

Nuxt.js Counter with watchEffect

Nuxt.js Counter with CSS variables

Nuxt.js Counter with history

Nuxt.js Counter with v-model binding

Nuxt.js Counter with buttons map

Frequently Asked Questions about Nuxt-js

What is Nuxt-js?

What are the primary use cases for Nuxt-js?

What are the strengths of Nuxt-js?

What are the limitations of Nuxt-js?

How can I practice Nuxt-js typing speed?

Learn Other Programming Languages

Learn Nuxt-js - 10 Code Examples & CST Typing Practice Test

Learn NUXT-JS with Real Code Examples

Explain

Core Features

Basic Concepts Overview

Project Structure

Building Workflow

Difficulty Use Cases

Comparisons