Nuxt.js Counter with watchEffect - Nuxt-js Typing CST Test

Nuxt.js Counter with watchEffect — Nuxt-js Code

Uses watchEffect to persist count automatically.

<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>

Nuxt-js Language Guide

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.

More Nuxt-js Typing Exercises

Practice Other Languages