Learnt — A Rolodex of Terms

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.

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.

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

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.

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.

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

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.

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

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.

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.

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

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

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.

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

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

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.

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

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.

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.

Nitro Docs

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

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.

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

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

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.

const router = useRouter()

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

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.

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.

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

<template>
  <button @click="count++">8</button>
</template>

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.

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.

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

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.

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.

Vue 3 Docs — SSR

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

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.

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

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

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.

VueUse — useRouteQuery

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

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.

Vite Docs