The Rolodex

This page is a living index of terms, concepts, and ideas I've encountered and actually understood. It's not a glossary of definitions I've copied — each entry is written in my own words once something has clicked. Think of it as a personal vocabulary: the language I've picked up while building, reading, and figuring things out. New entries get added whenever a concept earns its place.

Terms: 15
Topics: 4
Latest added: 28 Mar 2026

A

Async Functions

Budding

JavaScript
Vue 3

My version

It's a cleaner way to write code that has to wait — like fetching data — without nesting .then() callbacks. You write it like normal top-to-bottom code but it still runs asynchronously under the hood.

Definition

Functions declared with the async keyword that always return a Promise. Inside them, await pauses execution until a Promise resolves, without blocking the main thread.

Example

async function getUser(id) {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
}

B

Build-time vs Runtime Dependency

Budding

Build & Architecture

My version

Build-time = tools that help make the thing (Vite, TypeScript, ESLint). Runtime = stuff the thing actually needs to work in a browser or server (Vue, Pinia, a date library). Getting this wrong bloats your bundle with things users never needed.

Definition

A build-time dependency is only required during compilation or bundling and is not included in the final output. A runtime dependency ships with the app and must be present when it runs.

C

Composable

Budding

Vue 3

My version

Like a React custom hook but for Vue. Instead of copying the same ref + watch logic into every component, you pull it into a useXxx() function and call it wherever you need it.

Definition

A function that uses Vue's Composition API to encapsulate and reuse stateful logic — refs, watchers, lifecycle hooks — across components. Conventionally prefixed with use.

Example

// useFetch.js
import { ref } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  fetch(url)
    .then(r => r.json())
    .then(json => (data.value = json))
    .catch(err => (error.value = err))
  return { data, error }
}

Vue 3 Docs — Composables Full note

Conditional Rendering

Budding

Vue 3

My version

Use v-if when you want the element gone from the DOM entirely. Use v-show when the element needs to toggle often — it's cheaper because it doesn't re-create the DOM node each time, just hides it.

Definition

Using v-if, v-else-if, and v-else directives to add or remove elements from the DOM based on a condition. v-show is a related directive that toggles visibility via CSS instead.

Example

<p v-if="isLoggedIn">Welcome back!</p>
<p v-else>Please log in.</p>

G

Git (core commands)

Budding

General Dev

My version

Git is a save system for code. add stages changes, commit saves them locally with a message, push sends them to the shared remote. Branches are cheap — make one whenever you're trying something new.

Definition

A distributed version control system. Changes move through three stages: working tree → staging area → local repository → remote repository.

Example

git add src/components/Card.vue
git commit -m "add rolodex card component"
git push origin main

M

Math.sign()

Budding

JavaScript

My version

Useful any time you care about direction, not magnitude — e.g. which way the user is scrolling or dragging. Replaces a conditional like n > 0 ? 1 : -1 with a single call.

Definition

A built-in method that returns 1 if the number is positive, -1 if negative, and 0 if zero.

Example

const direction = Math.sign(deltaY) // 1 = down, -1 = up

N

Nitro

Budding

Build & Architecture

My version

Nitro is what makes Nuxt backend code "just work" wherever you deploy. You write one API route, Nitro figures out how to run it on whatever platform you're targeting. It abstracts the runtime so you don't have to think about it.

Definition

The server engine behind Nuxt 3. It compiles server routes and API handlers into a universal output that can run across different runtimes — Node.js, Deno, Cloudflare Workers, and more.

P

Pagination

Budding

Vue 3
JavaScript

My version

The three numbers you always need: current page, items per page, total count. Everything else — the prev/next buttons, the page list — is derived from those. Componentize the controls early; they always get reused.

Definition

A technique for splitting a dataset into discrete pages, loading or displaying only a subset at a time. Can be implemented server-side (fetch per page) or client-side (slice an array).

Example

const page = ref(1)
const perPage = 10
const paginated = computed(() =>
  items.value.slice((page.value - 1) * perPage, page.value * perPage)
)

R

router.push()

Budding

Vue 3

My version

It's the code equivalent of clicking a <RouterLink>. Use it when navigation needs to happen as a result of logic — after a form submits, after login succeeds, after an action completes.

Definition

A Vue Router method for programmatic navigation. Pushes a new entry onto the history stack, navigating to the specified route.

Example

const router = useRouter()

async function handleLogin() {
  await login(credentials)
  router.push({ name: 'dashboard' })
}

S

Script Setup

Budding

Vue 3

My version

It removes boilerplate. No setup() { return { ... } } — you just write your logic and the compiler wires it to the template. It's processed at build time, so there's no runtime cost.

Definition

A compile-time syntax sugar for the Composition API in Vue 3 SFCs. Top-level bindings declared inside <script setup> are automatically exposed to the template.

Example

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

Slots

Budding

Vue 3

My version

Slots are how you make components that wrap other content — like a card, modal, or layout shell. The child says "put content here" with <slot>, the parent fills it in. Named slots let you fill multiple different spots.

Definition

A Vue mechanism for passing template content from a parent component into a child's designated placeholder. Named slots allow multiple injection points in a single component.

Example

<!-- Card.vue -->
<template>
  <div class="card">
    <slot name="header" />
    <slot />
  </div>
</template>

<!-- Parent -->
<Card>
  <template #header><h2>Title</h2></template>
  <p>Card body content.</p>
</Card>

SSR (Server-Side Rendering)

Budding

Build & Architecture
Vue 3

My version

The browser gets real content on the first response — faster first paint, better SEO. The trade-off is that your components run on both server and client, so you have to be careful about browser-only APIs like window or localStorage.

Definition

Rendering a page's HTML on the server before sending it to the browser. The client receives a fully-formed HTML document rather than an empty shell that JavaScript must populate.

T

toReversed()

Budding

JavaScript

My version

Use this instead of .reverse() whenever you're working with reactive state — Vue's refs included. .reverse() mutates the array in place, which can cause silent bugs when the same array is referenced elsewhere.

Definition

An ES2023 array method that returns a new array with the elements in reverse order, without mutating the original.

Example

const original = [1, 2, 3]
const flipped = original.toReversed() // [3, 2, 1]
// original is still [1, 2, 3]

U

useRouterQuery

Budding

Vue 3

My version

Instead of managing a ref for a filter and then separately syncing it to the URL, this pattern makes the URL the source of truth. The query param IS the state — refreshing the page or sharing the link preserves everything.

Definition

A composable pattern built on Vue Router's useRoute and useRouter that makes URL query parameters readable and writable as reactive state.

V

Vite

Budding

Build & Architecture

My version

The reason modern Vue/React dev feels fast. In development, Vite serves files directly as ES modules — no bundling step, so hot reload is nearly instant. Production still gets a proper bundle via Rollup.

Definition

A frontend build tool that uses native ES modules for near-instant dev server startup and Rollup for optimised production builds.