Nuxt.js Counter with v-model binding - Nuxt-js Typing CST Test

Nuxt.js Counter with v-model binding — Nuxt-js Code

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

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

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