Skip to main content
CodeSpeedTest
Languages
Start TypingJump into a test — pick any languageAdaptive TrainingUnlock chars as you master themPractice DrillsFocused sessions targeting weak spotsDaily ChallengesNew coding challenges every dayRace ModeCompete against others in real timeAI OpponentRace against an AI at your WPM levelTournamentsLive coding speed tournamentsArcade GamesZType, Overkill Survival, Glyphica & moreGamificationXP, coins, badges & quests
LeaderboardGlobal rankings for every languageCertificatesEarn verifiable Bronze / Silver / Gold certsActivityDaily streaks & historical analyticsProfileYour stats, badges & achievements
Browse Languages500+ languages with real code examplesBlogTips, guides & deep divesFree ToolsWPM calculator, typing speed report & moreFAQCommon questions answeredGetting StartedNew to CodeSpeedTest?AboutOur story & missionSupportGet help — Pro users get priorityContactGet in touch with the team
Pricing
  1. Home
  2. /
  3. Learn
  4. /
  5. Vue-js

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 ComponentVue.js Counter with Computed PropertyVue.js Counter with WatcherVue.js Counter with LocalStorageVue.js Counter with PropsVue.js Counter with Event EmissionVue.js Counter with Toggle Theme Using Class BindingVue.js Counter with Watch and Class BindingVue.js Counter with SlotsVue.js Counter with Mounted Hook

Learn VUE-JS with Real Code Examples

Updated Nov 21, 2025

Explain

Vue.js allows developers to build reactive and component-based web applications.

It provides an intuitive syntax for declarative HTML templates.

Vue combines the flexibility of a library with the capabilities of a full-featured framework when using its ecosystem.

Core Features

Two-way data binding with `v-model`

Directives like `v-if`, `v-for`, `v-show`

Computed properties and watchers

Lifecycle hooks for component management

Custom events and props for component communication

Basic Concepts Overview

Templates with HTML syntax

Reactive data properties

Directives: `v-bind`, `v-if`, `v-for`

Methods, computed properties, and watchers

Component communication with props and events

Project Structure

src/ - source code

src/components/ - Vue components

src/views/ - page-level components

src/assets/ - images, CSS, etc.

public/ - static assets and index.html

Building Workflow

Create components in `.vue` files

Use Vue CLI or Vite for project setup

Organize components in directories

Write reactive data and methods

Run development server with hot reload

Difficulty Use Cases

Beginner: basic UI components

Intermediate: small SPAs and dashboards

Advanced: large-scale SPA with Vuex/Pinia and Vue Router

Expert: server-side rendering with Nuxt.js

Community: contributing to Vue plugins and ecosystem libraries

Comparisons

Simpler learning curve than Angular

Less boilerplate than React (with JSX) for basic apps

Lightweight and performant

Full ecosystem support when using Vue Router, Vuex/Pinia

Strong template-based syntax vs JSX for declarative UIs

Versioning Timeline

2014 - Vue.js 0.11 initial release

2015 - Vue.js 1.0 stable release

2016 - Vue.js 2.0 with virtual DOM

2020 - Vue.js 3.0 with Composition API

2025 - Continuous improvements with Vue 3.x features

Glossary

Directive: special token in template (`v-if`, `v-for`)

Component: reusable UI unit

Computed: cached property based on reactive data

Watcher: function reacting to data changes

Vuex/Pinia: state management library

Installation Setup

Install via CDN for simple projects

Install via npm: `npm install vue`

Use Vue CLI: `npm install -g @vue/cli`

Create project with `vue create project-name`

Integrate with build tools like Vite or Webpack

Environment Setup

Install Node.js and npm

Install Vue CLI globally: `npm install -g @vue/cli`

Optionally install Vite for faster builds

Set up IDE plugins (VSCode: Vetur, Volar)

Verify installation with `vue --version`

Config Files

package.json - project dependencies

vite.config.js / vue.config.js - build configuration

main.js / main.ts - entry point

App.vue - root component

components/ - reusable components folder

Cli Commands

vue create project-name - scaffold new project

npm run serve - start development server

npm run build - production build

npm run lint - run linter

npm run test - run tests

Internationalization

Use vue-i18n plugin for translations

Store messages in JSON/YAML

Switch locales dynamically

Support RTL and LTR languages

Format dates, numbers, and currencies per locale

Accessibility

Use ARIA attributes in templates

Ensure keyboard navigation

Use semantic HTML elements

Test with screen readers

Follow WCAG guidelines

Ui Styling

Scoped CSS in `.vue` files

CSS Modules or Tailwind CSS

Dynamic classes with `:class` binding

Inline styles via `:style` binding

Transition and animation with `transition` component

State Management

Vuex: centralized state for large apps

Pinia: modern, modular state management

Reactive data inside components for local state

Props and events for parent-child communication

Provide/Inject API for dependency injection

Data Management

Reactive data via `ref()` and `reactive()`

Computed properties and watchers

Persist state in localStorage or IndexedDB

Fetch and manage API data with Axios

Use plugins for advanced data handling

Architecture

Component-based architecture

Reactive rendering with a virtual DOM

Template, script, and style encapsulation in `.vue` files

Optionally integrates with Vue Router for SPA routing

Vuex/Pinia for centralized state management

Rendering Model

Virtual DOM for efficient updates

Reactive data triggers DOM changes automatically

Template syntax compiled to render functions

Component reusability and encapsulation

Optional server-side rendering with Nuxt.js

Architectural Patterns

Component-based architecture

Reactive programming with Vue reactivity

State management with Vuex/Pinia

Event-driven communication via props and custom events

Composition API for modular logic

Real World Architectures

Dashboard applications

E-commerce SPAs

Progressive web apps

Server-side rendered apps with Nuxt.js

Component libraries for design systems

Design Principles

Progressive framework: adoptable incrementally

Declarative and reactive rendering

Component-based architecture

Lightweight and performant

Strong tooling and ecosystem support

Scalability Guide

Split components into reusable modules

Use centralized state management

Lazy-load routes and components

Optimize reactivity for large datasets

Monitor performance with Vue DevTools

Migration Guide

Upgrade from Vue 2 to Vue 3 using migration build

Refactor Options API to Composition API if desired

Update dependencies to Vue 3 compatible versions

Test components thoroughly

Adapt custom directives and plugins

Performance Notes

Use key attribute with `v-for` loops

Avoid unnecessary reactivity for large datasets

Lazy-load components with dynamic imports

Use computed properties instead of methods for caching

Minimize watchers and heavy reactive dependencies

Security Notes

Escape dynamic content to prevent XSS

Avoid direct DOM manipulation outside Vue

Use HTTPS for API calls

Sanitize user input before rendering

Keep dependencies up to date

Monitoring Analytics

Use Vue DevTools for state inspection

Log errors with Sentry or similar tools

Monitor performance metrics

Track reactive data updates

Analyze user interactions with analytics libraries

Code Quality

Follow Vue Style Guide

Use ESLint and Prettier

Write unit tests with Vue Test Utils

Use TypeScript for larger apps

Document components with Storybook or VuePress

Practical Examples

Interactive form with validation

Dynamic dashboard with charts

SPA for e-commerce site

Progressive web app with offline support

Custom component library

Troubleshooting

Check template syntax and unmatched tags

Ensure proper component registration

Verify reactive properties are declared in `data()`

Debug lifecycle hook behavior

Check Vue version compatibility with plugins

Testing Guide

Unit test components with Vue Test Utils

Mock dependencies and props

Integration testing with Jest or Vitest

End-to-end testing with Cypress

Test reactive state updates and computed properties

Deployment Options

Build static assets with `npm run build`

Deploy to Netlify, Vercel, or GitHub Pages

Serve SPA with Nginx or Apache

Server-side rendering with Nuxt.js

Dockerize Vue apps for container deployment

Tools Ecosystem

Vue CLI for project scaffolding

Vite for fast build tooling

Vue DevTools for browser debugging

Vuex/Pinia for state management

Nuxt.js for server-side rendering

Integrations

Third-party component libraries like Vuetify, Element UI, Tailwind UI

Vue Router for SPA navigation

Axios or Fetch for API integration

Testing libraries: Jest, Vue Test Utils

GraphQL with Apollo Client

Productivity Tips

Leverage Vue CLI or Vite scaffolding

Use single-file components for modularity

Hot module replacement during development

Component libraries for reusable UI

Centralize shared logic with Composition API or mixins

Challenges

Build a todo list SPA

Create a dashboard with charts

Implement nested components and props

Integrate an API with Axios

Deploy a Vue app with CI/CD pipeline

Learning Path

Learn Vue basics: templates, directives, reactive data

Understand components and props

Master Vue Router and state management

Practice single-file components and scoped styles

Build full-featured SPAs or PWAs

Skill Improvement Plan

Week 1: Vue basics and directives

Week 2: Components, props, events

Week 3: State management with Vuex/Pinia

Week 4: Routing and navigation

Week 5: Advanced patterns, SSR with Nuxt.js

Interview Questions

Explain Vue reactivity system

What are lifecycle hooks?

How do you communicate between components?

Difference between Vuex and Pinia

How does Vue handle conditional rendering?

Cheat Sheet

`v-if` - conditional rendering

`v-for` - list rendering

`v-model` - two-way binding

`props` - pass data to child

`@click` - event binding

Books

The Majesty of Vue.js

Fullstack Vue

Vue.js 3 By Example

Vue.js Up & Running

Mastering Vue.js

Tutorials

Vue.js official guide

Vue Mastery courses

Vue School tutorials

Learn Vue in Y Minutes

YouTube Vue.js tutorials

Official Docs

https://vuejs.org/guide/introduction.html

https://v3.vuejs.org/

https://vuejs.org/api/

Community Links

Stack Overflow Vue tag

Reddit r/vuejs

GitHub Vue.js repository

Vue Discord and forum communities

Twitter Vue.js community

Community Support

Official Vue.js documentation

Vue DevTools GitHub repository

Stack Overflow Vue tag

Reddit r/vuejs

Vue Discord and forum communities

Monetization

Commercial SPAs and dashboards

Freelance front-end development

Component libraries and plugins

PWAs for client projects

Integration with SaaS platforms

Future Roadmap

Better TypeScript integration

Enhanced Composition API features

Improved performance and bundle optimization

Expanded ecosystem plugins and tools

Continued community-driven development

When Not To Use

Projects requiring extensive legacy library support

When React or Angular is mandated in the company

Large enterprise projects without TypeScript adoption

Complex server-side rendering without Nuxt.js

Projects requiring extremely high ecosystem compatibility outside Vue

Final Summary

Vue.js is lightweight, reactive, and component-based.

Supports both small and large-scale web applications.

Flexible for incremental adoption or full SPA development.

Strong ecosystem with tools like Vuex/Pinia and Vue Router.

Ideal for modern front-end development with declarative templates.

Faq

Is Vue.js reactive?

Yes, Vue automatically updates DOM when data changes.

Can Vue be integrated incrementally?

Yes, you can use Vue for a small part of a page.

What is the difference between Vue 2 and Vue 3?

Vue 3 introduces Composition API, better performance, and smaller bundle size.

Does Vue support TypeScript?

Yes, Vue supports TypeScript with `.vue` SFCs and TS tooling.

Is Vue suitable for large-scale SPAs?

Yes, especially when using Vue Router and state management libraries.

Code Sample Descriptions

1

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

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

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

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

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

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

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

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

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

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

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypherGremlinPartiqlHaskellElixirFsharpView all languages →
CodeSpeedTest

Improve your coding speed, code accuracy, and programming syntax WPM with practice sessions across 500+ programming languages.

Quick Links

HomeAboutFeaturesGetting StartedLanguages

Legal & Support

Pro ⚡ PricingContactPrivacy PolicyTerms of Service

Connect

CodeSpeedTest on GitHubCodeSpeedTest on TwitterEmail CodeSpeedTest

© 2026 CodeSpeedTest. All rights reserved.