Pages & Routing — Series 2

Preview — 3 of 10 questions

What does definePageMeta let a page do that a plain <script setup> component can't?

javascript

<!-- pages/dashboard.vue -->
<script setup>
definePageMeta({
  layout: 'admin',
  middleware: 'auth',
})
</script>

AdefinePageMeta is a Nuxt-specific compiler macro, available only inside pages/, that declares page-level configuration (which layout to use, which middleware to run before entering the route, and other route metadata) in a way Nuxt can read at build time and route-resolution time — before the component itself has even executed

BdefinePageMeta is just a naming convention — it's actually a plain reactive object that must be manually registered with the router

CdefinePageMeta replaces <script setup> entirely — a page can use one or the other, never both

DdefinePageMeta only works in Nuxt's Options API pages — <script setup> pages can't use it at all

How does a file named pages/products/[id].vue let a component read which product ID is currently being viewed?

javascript

<!-- pages/products/[id].vue -->
<script setup>
const route = useRoute()
const productId = route.params.id
</script>

A[id] in the filename creates a dynamic route segment; Nuxt's file-based router maps any URL matching that position (/products/42, /products/abc) to this page, and the matched segment's value becomes available as route.params.id via useRoute()

BproductId is undefined until a separate defineProps(['id']) call is added — route params aren't available through useRoute() alone

C[id].vue only matches numeric IDs — a non-numeric value in that URL position results in a 404

DThe square brackets are purely cosmetic/organizational — this file behaves identically to a static pages/products/id.vue

Why does wrapping a component that reads window.innerWidth in <ClientOnly> prevent an SSR crash?

javascript

<template>
  <ClientOnly>
    <WindowSizeWidget />
  </ClientOnly>
</template>

A<ClientOnly> transpiles window references into a server-safe polyfill automatically, so the component runs identically on both server and client

B<ClientOnly> skips rendering its default slot's content entirely during server-side rendering, only mounting it after the app has hydrated in the browser — where window genuinely exists — avoiding the ReferenceError that would occur if that component's code ran on the server, where window is undefined

C<ClientOnly> delays the entire page's SSR response until the client has connected, effectively disabling SSR for the whole route

D<ClientOnly> only affects <style> blocks — it has no effect on <script> execution timing

Answer all 10 questions (7 more), see explanations for every answer, and track your score.