Vue.js.

Vue sits between the two. It ships more official tooling than React and far less structure than Angular. You can adopt it one page at a time, so it calls itself a progressive framework.

Compared with React:

• Vue uses HTML-based templates by default, while React uses JSX. Vue supports JSX too, through render functions.
• Vue Router and Pinia are official libraries kept by the core team. React relies on community libraries for routing and state.
• Vue tracks the state each component reads, so a child updates only when it needs to. React re-runs a component on every update and needs useMemo to skip expensive work.
• Vue has a gentler learning curve and more approachable syntax.

Compared with Angular:

• Angular is a full framework, while Vue is lighter and more flexible.
• Vue has simpler syntax and less boilerplate code.
• Angular uses TypeScript by default, while Vue supports it as an option.

In Vue 3, the Vue instance is the application instance. You create it with createApp(), passing a root component that every other component renders inside.

import { createApp } from 'vue'
import App from './App.vue'
import BaseButton from './BaseButton.vue'

const app = createApp(App) // App is the root component
app.component('BaseButton', BaseButton) // a global component
app.config.errorHandler = (err) => console.error(err)
app.mount('#app')

The application instance holds app-level configuration: plugins, global components and options on app.config. Apply all of it before you call .mount(), because nothing renders until then.

The data and methods live in components, starting with the root component, not in the application instance itself.

Reactivity means that when your data changes, Vue updates the DOM that depends on it, with no manual DOM code. You declare reactive state with ref() or reactive().

It works by dependency tracking. While a component renders, Vue records each reactive value it reads. When one of those values changes, Vue re-runs only the work that depends on it.

Vue 3 uses JavaScript Proxies for reactive objects and getters and setters for refs. A Proxy sees property additions, deletions and array writes by index. Vue 2's Object.defineProperty approach could not detect those changes.

created runs once the component's reactive state is set up but before any DOM exists. mounted runs after the component's DOM has been created and inserted into the page.

• created: data and computed properties are set up, and so are methods and watchers. But this.$el is not, because no DOM exists yet. It is a good place for API calls, setting up data, and other logic that does not touch the DOM.
• mounted: the DOM is fully available, and its synchronous child components are mounted too. Use it to read or change DOM elements and to start third-party libraries that need an element.

created also runs during server-side rendering, while mounted runs only in the browser. That makes mounted the place for browser-only code.

With <script setup>, the setup code runs before both hooks, so it covers the work of created. Use onMounted() for the work of mounted.

Vue binds data to the template in four ways. Interpolation and attribute binding carry data from state to the DOM, event binding carries user actions back, and v-model does both.

Text interpolation puts a value into text with double curly braces. Vue renders it as plain text and updates it when the value changes.

<span>{{ message }}</span>

Attribute binding uses v-bind, or its : shorthand, because curly braces do not work inside attributes.

<div :id="dynamicId"></div>
<div v-bind:class="className"></div>

Two-way binding with v-model keeps a form input and a state value in sync.

<input v-model="message" />

Event binding uses v-on, or its @ shorthand, to run a handler when a DOM event fires.

<button @click="handleClick">Click me</button>
<button v-on:click="handleClick">Click me</button>

v-if adds and removes the element from the DOM, while v-show always renders it and only toggles its CSS display property. Use v-show when something toggles often, and v-if when the condition rarely changes.

• v-if is real conditional rendering. It is lazy, so if the condition starts false, Vue renders nothing. Each toggle destroys and recreates the element, its event listeners and its child components, which gives it a higher toggle cost.
• v-show renders the element once, whatever the condition, and keeps it in the DOM. That gives it a higher initial render cost but cheap toggles.

v-show does not work on a <template> element or with v-else, while v-if supports both.

<div v-if="isVisible">Rendered conditionally</div>
<div v-show="isVisible">Always in DOM, visibility toggled</div>

v-for renders an element once for each item in a source, using the item in items syntax. The source can be an array, an object or a number.

<!-- Array iteration -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
<!-- Object iteration -->
<li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
<!-- Number iteration -->
<span v-for="n in 10" :key="n">{{ n }}</span>

An optional second alias gives the index for an array, or the key for an object. With a number, n counts from 1 up to the number, not from 0.

Best practices:

• Always use :key with a unique, stable identifier. Without a key, Vue patches elements in place by position, which breaks lists that hold component state or input values.
• Avoid using the index as the key when the list can change, because the index follows the position, not the item.
• Don't use v-for and v-if on the same element. v-if runs first and cannot see the loop variable, so filter the list in a computed property instead.

A computed property is a value derived from reactive state that Vue caches. It tracks its reactive dependencies on its own and re-runs only when one of them changes.

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')

// Re-runs only when firstName or lastName changes
const fullName = computed(() => `${firstName.value} ${lastName.value}`)

// Writable: assigning fullNameWritable.value calls set
const fullNameWritable = computed({
  get: () => fullName.value,
  set: (value) => { [firstName.value, lastName.value = ''] = value.split(' ') }
})
</script>

In the Composition API, computed() returns a computed ref. You read it with .value in script, and the template unwraps it for you. Computed properties are read-only by default, and passing an object with get and set makes one writable.

Caching helps performance, and the declarative style keeps templates readable. The Options API puts the same getters under its computed option. Keep getters pure, with no side effects.

A computed property is cached and re-evaluates only when its reactive dependencies change, while a method runs every time it is called. Use computed properties for derived values, and methods for actions such as event handlers.

• Computed properties are accessed like properties and should be pure functions, with no side effects. Reading one again returns the cached result until its dependencies change.
• Methods are called like functions and can have side effects. A method called in the template runs again on every re-render.

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
},
methods: {
  reverseMessage() {
    this.message = this.message.split('').reverse().join('')
  }
}

Because of the cache, a computed that only reads Date.now() never updates, since Date.now() is not reactive. In <script setup>, a method is a plain function and a computed property is computed().

Most components are Single-File Components: a .vue file with a template, a script and styles. With <script setup>, every top-level binding is usable in the template. That means each variable, function and import declared directly in the script, not inside a function.

<template>
  <div>{{ message }}</div>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('Hello from component')
</script>
<style scoped>
div {
  color: blue;
}
</style>

To use a component inside another, register it. Local registration makes it available only to the component that registers it. In <script setup>, importing the component is enough. The Options API, Vue's older object-based style, lists it in the components option instead.

Global registration with app.component() makes a component usable in every template of the app. But the build tool cannot drop a global component from the bundle when no page uses it, a step called tree-shaking. So prefer local registration.

app.component('my-component', {
  template: '<div>A custom component!</div>'
})

Props are custom attributes a parent uses to pass data down to a child component. In <script setup> you declare them with defineProps(), and the object form lets Vue validate each prop.

<script setup>
defineProps({
  title: String, // basic type check
  age: {
    type: Number,
    required: true,
    validator: (value) => value >= 0
  },
  message: { type: String, default: 'Hello World' },
  tags: { type: Array, default: () => [] } // array and object defaults need a factory function
})
</script>

The type can be any native constructor, such as String, Number or Date. It can also be a custom constructor function, or an array of types like [String, Number]. When a check fails, Vue logs a console warning in the development build. The Options API takes the same object in its props option.

Props are values a component receives from its parent, while data is the state the component owns. The Options API declares that state in the data() function. In <script setup>, defineProps() declares the props and ref() creates the local state.

• Props are an external data source and are read-only. Vue follows one-way data flow: a parent's change flows down to the child, never back up. When you declare prop types, Vue also validates props against them.
• data is the component's internal state, private to it, mutable and reactive.

export default {
  props: ['message'],        // From parent
  data() {
    return {
      localMessage: ''       // Component's own data
    }
  }
}

When a child needs to change a prop, it emits an event and lets the parent update it. When it only needs a starting value, it copies the prop into its own data.

The child calls an emit function with an event name and optional data, and the parent listens with v-on, usually written @. In <script setup> you get that function from defineEmits().

<!-- Child component -->
<script setup>
const emit = defineEmits(['customEvent']) // Declare emitted events
function handleClick() {
  emit('customEvent', 'some data')
}
</script>

<!-- Parent template -->
<child-component @custom-event="handleCustomEvent" />

// Parent component
function handleCustomEvent(data) {
  console.log('Received:', data)
}

Every argument after the event name reaches the parent's handler. Vue converts the case for you, so a camelCase customEvent is heard by a kebab-case @custom-event listener. In the Options API, or directly in a template, you call $emit instead.

Declaring the events is optional but recommended. It documents the component, and Vue then stops passing those listeners down as fallthrough attributes, the attributes a child forwards to its root element. Component events do not bubble, so only the direct parent can listen.

Call the store's use...Store() function inside the component's setup, and use the returned store directly. State, getters and actions are all properties on it.

import { useCounterStore } from '@/stores/counter'
export default {
  setup() {
    const counter = useCounterStore()
    return {
      counter
    }
  }
}

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double: {{ counter.double }}</p>
    <button @click="counter.increment">Increment</button>
  </div>
</template>

With <script setup>, you skip the return. Calling useCounterStore() at the top level is enough. The store is created the first time a component calls it.

To destructure the store and keep reactivity, use storeToRefs():

import { storeToRefs } from 'pinia'
const counter = useCounterStore()
const { count, double } = storeToRefs(counter)
const { increment } = counter

The store is wrapped in reactive, so plain destructuring such as const { count } = counter breaks reactivity. storeToRefs() creates a ref for each state property and getter, so destructured values stay in sync. Actions are bound to the store, so you destructure them directly.

Options API components can use the map helpers instead: mapState(), mapActions() and mapStores().

Vue Router is the official routing library for Vue. It maps URL paths to components, so a single-page app can switch between views without a full page reload.

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
// In main.js
app.use(router)

Setup has three steps:

• Define a routes array that maps each path to a component.
• Create the router with createRouter() and a history mode.
• Install it with app.use(router).

createWebHistory() gives normal URLs but needs a server fallback to index.html, while createWebHashHistory() needs no server setup but hurts SEO.

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view />
  </div>
</template>

In templates, <router-link> renders a link that navigates without a page reload. <router-view> renders the component that matches the current URL.