Nuxt.js Counter with CSS variables - Nuxt-js Typing CST Test

Nuxt.js Counter with CSS variables — Nuxt-js Code

Uses CSS variables to dynamically change colors for theme.

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

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