Learn NUXT-JS with Real Code Examples

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

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

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

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

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

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

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

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

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

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