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

Vue.js is a progressive, open-source JavaScript framework for building user interfaces and single-page applications. It emphasizes simplicity, declarative rendering, and reactive data binding.

View all 10 Vue-js code examples →

Vue.js Counter Component Vue.js Counter with Computed Property Vue.js Counter with Watcher Vue.js Counter with LocalStorage Vue.js Counter with Props Vue.js Counter with Event Emission Vue.js Counter with Toggle Theme Using Class Binding Vue.js Counter with Watch and Class Binding Vue.js Counter with Slots Vue.js Counter with Mounted Hook

Learn VUE-JS with Real Code Examples

Updated Nov 21, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Vue.js Counter Component

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

<script>
export default {
    data() {
        return { count: 0, isDark: false };
    },
    methods: {
        increment() { this.count++; },
        decrement() { this.count--; },
        reset() { this.count = 0; },
        toggleTheme() { this.isDark = !this.isDark; }
    }
};
</script>

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

Demonstrates a simple counter component using Vue.js reactive data and methods.

Let’s Try →

Vue.js Counter with Computed Property

<template>
    <div>
        <h2>{{ message }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0 }; },
    methods: { increment() { this.count++; }, decrement() { this.count--; } },
    computed: { message() { return `Counter: ${this.count}`; } }
};
</script>

Uses a computed property to display a message based on the counter value in Vue.js.

Let’s Try →

Vue.js Counter with Watcher

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0 }; },
    methods: { increment() { this.count++; }, decrement() { this.count--; } },
    watch: { count(newVal) { console.log('Counter changed to:', newVal); } }
};
</script>

Uses a watcher to log changes when the counter value updates in Vue.js.

Let’s Try →

Vue.js Counter with LocalStorage

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="reset">Reset</button>
    </div>
</template>

<script>
export default {
    data() { return { count: parseInt(localStorage.getItem('count') || '0', 10) }; },
    methods: {
        increment() { this.count++; this.save(); },
        decrement() { this.count--; this.save(); },
        reset() { this.count = 0; this.save(); },
        save() { localStorage.setItem('count', this.count); }
    }
};
</script>

Persists the counter value using localStorage in Vue.js.

Let’s Try →

Vue.js Counter with Props

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    props: { initialCount: { type: Number, default: 0 } },
    data() { return { count: this.initialCount }; },
    methods: { increment() { this.count++; }, decrement() { this.count--; } }
};
</script>

Receives an initial counter value via props in Vue.js.

Let’s Try →

Vue.js Counter with Event Emission

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0 }; },
    methods: {
        increment() { this.count++; this.$emit('update', this.count); },
        decrement() { this.count--; this.$emit('update', this.count); }
    }
};
</script>

Emits counter value changes to a parent component in Vue.js using $emit.

Let’s Try →

Vue.js Counter with Toggle Theme Using Class Binding

<template>
    <div :class="themeClass">
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="toggleTheme">Toggle Theme</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0, isDark: false }; },
    computed: { themeClass() { return this.isDark ? 'dark-theme' : 'light-theme'; } },
    methods: { increment() { this.count++; }, decrement() { this.count--; }, toggleTheme() { this.isDark = !this.isDark; } }
};
</script>

Demonstrates dynamic class binding for dark/light theme in Vue.js.

Let’s Try →

Vue.js Counter with Watch and Class Binding

<template>
    <div :class="{ 'dark-theme': isDark, 'light-theme': !isDark }">
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0, isDark: false }; },
    methods: { increment() { this.count++; }, decrement() { this.count--; } },
    watch: { count(newVal) { this.isDark = newVal % 2 === 0; } }
};
</script>

Watches counter changes and applies theme classes dynamically in Vue.js.

Let’s Try →

Vue.js Counter with Slots

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <slot name="controls">
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        </slot>
    </div>
</template>

<script>
export default {
    data() { return { count: 0 }; },
    methods: { increment() { this.count++; }, decrement() { this.count--; } }
};
</script>

Uses slots to allow custom button placement in Vue.js counter component.

Let’s Try →

Vue.js Counter with Mounted Hook

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0 }; },
    mounted() { console.log('Component mounted. Counter initialized to', this.count); },
    methods: { increment() { this.count++; }, decrement() { this.count--; } }
};
</script>

Demonstrates use of mounted lifecycle hook to initialize counter in Vue.js.

Let’s Try →

Frequently Asked Questions about Vue-js

What is Vue-js?

Vue.js is a progressive, open-source JavaScript framework for building user interfaces and single-page applications. It emphasizes simplicity, declarative rendering, and reactive data binding.

What are the primary use cases for Vue-js?

Single-page applications (SPAs). Interactive web interfaces and dashboards. Progressive web apps (PWAs). Front-end integration for multi-page apps. Rapid prototyping of UI components

What are the strengths of Vue-js?

Easy to learn and integrate. Lightweight and performant. Flexible: can be used as library or framework. Strong ecosystem: Vue Router, Vuex, Pinia. Active community and well-maintained documentation

What are the limitations of Vue-js?

Smaller enterprise adoption compared to React or Angular. Rapid ecosystem changes can introduce breaking changes. Limited official support for large-scale TypeScript projects (but improving). Some complex integrations require advanced knowledge. Learning curve for Vuex or advanced patterns

How can I practice Vue-js typing speed?

CodeSpeedTest offers 10+ real Vue-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 →

Code Sample Descriptions

Vue.js Counter Component

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

<script>
export default {
    data() {
        return { count: 0, isDark: false };
    },
    methods: {
        increment() { this.count++; },
        decrement() { this.count--; },
        reset() { this.count = 0; },
        toggleTheme() { this.isDark = !this.isDark; }
    }
};
</script>

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

Demonstrates a simple counter component using Vue.js reactive data and methods.

Let’s Try →

Vue.js Counter with Computed Property

<template>
    <div>
        <h2>{{ message }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0 }; },
    methods: { increment() { this.count++; }, decrement() { this.count--; } },
    computed: { message() { return `Counter: ${this.count}`; } }
};
</script>

Uses a computed property to display a message based on the counter value in Vue.js.

Let’s Try →

Vue.js Counter with Watcher

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0 }; },
    methods: { increment() { this.count++; }, decrement() { this.count--; } },
    watch: { count(newVal) { console.log('Counter changed to:', newVal); } }
};
</script>

Uses a watcher to log changes when the counter value updates in Vue.js.

Let’s Try →

Vue.js Counter with LocalStorage

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="reset">Reset</button>
    </div>
</template>

<script>
export default {
    data() { return { count: parseInt(localStorage.getItem('count') || '0', 10) }; },
    methods: {
        increment() { this.count++; this.save(); },
        decrement() { this.count--; this.save(); },
        reset() { this.count = 0; this.save(); },
        save() { localStorage.setItem('count', this.count); }
    }
};
</script>

Persists the counter value using localStorage in Vue.js.

Let’s Try →

Vue.js Counter with Props

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    props: { initialCount: { type: Number, default: 0 } },
    data() { return { count: this.initialCount }; },
    methods: { increment() { this.count++; }, decrement() { this.count--; } }
};
</script>

Receives an initial counter value via props in Vue.js.

Let’s Try →

Vue.js Counter with Event Emission

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0 }; },
    methods: {
        increment() { this.count++; this.$emit('update', this.count); },
        decrement() { this.count--; this.$emit('update', this.count); }
    }
};
</script>

Emits counter value changes to a parent component in Vue.js using $emit.

Let’s Try →

Vue.js Counter with Toggle Theme Using Class Binding

<template>
    <div :class="themeClass">
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="toggleTheme">Toggle Theme</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0, isDark: false }; },
    computed: { themeClass() { return this.isDark ? 'dark-theme' : 'light-theme'; } },
    methods: { increment() { this.count++; }, decrement() { this.count--; }, toggleTheme() { this.isDark = !this.isDark; } }
};
</script>

Demonstrates dynamic class binding for dark/light theme in Vue.js.

Let’s Try →

Vue.js Counter with Watch and Class Binding

<template>
    <div :class="{ 'dark-theme': isDark, 'light-theme': !isDark }">
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0, isDark: false }; },
    methods: { increment() { this.count++; }, decrement() { this.count--; } },
    watch: { count(newVal) { this.isDark = newVal % 2 === 0; } }
};
</script>

Watches counter changes and applies theme classes dynamically in Vue.js.

Let’s Try →

Vue.js Counter with Slots

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <slot name="controls">
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        </slot>
    </div>
</template>

<script>
export default {
    data() { return { count: 0 }; },
    methods: { increment() { this.count++; }, decrement() { this.count--; } }
};
</script>

Uses slots to allow custom button placement in Vue.js counter component.

Let’s Try →

Vue.js Counter with Mounted Hook

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0 }; },
    mounted() { console.log('Component mounted. Counter initialized to', this.count); },
    methods: { increment() { this.count++; }, decrement() { this.count--; } }
};
</script>

Demonstrates use of mounted lifecycle hook to initialize counter in Vue.js.

Let’s Try →

Frequently Asked Questions about Vue-js

What is Vue-js?

Vue.js is a progressive, open-source JavaScript framework for building user interfaces and single-page applications. It emphasizes simplicity, declarative rendering, and reactive data binding.

What are the primary use cases for Vue-js?

Single-page applications (SPAs). Interactive web interfaces and dashboards. Progressive web apps (PWAs). Front-end integration for multi-page apps. Rapid prototyping of UI components

What are the strengths of Vue-js?

Easy to learn and integrate. Lightweight and performant. Flexible: can be used as library or framework. Strong ecosystem: Vue Router, Vuex, Pinia. Active community and well-maintained documentation

What are the limitations of Vue-js?

How can I practice Vue-js typing speed?

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