Nuxt Basics — Series 3

Preview — 3 of 10 questions

What does swapping to <NuxtImg> change here?

javascript

<!-- Plain img -->
<img src="/hero.jpg" alt="Hero banner" />

<!-- NuxtImg -->
<NuxtImg src="/hero.jpg" alt="Hero banner" width="1200" height="600" />

A<NuxtImg> is a component from the @nuxt/image module that automatically handles image optimization — generating appropriately-sized/formatted versions (resizing, modern formats like WebP/AVIF where supported), lazy-loading by default, and setting the right attributes to avoid layout shift — all from one component, instead of a developer manually producing and wiring up multiple optimized image variants by hand

B<NuxtImg> is purely a stylistic alias for <img> with no functional difference — it exists only for naming consistency with other Nuxt components

C<NuxtImg> only works for images stored in the public/ directory; images imported from assets/ must always use a plain <img> tag

D<NuxtImg> disables all image loading during SSR, always rendering a blank placeholder until client-side hydration completes

What does explicitly passing name accomplish, compared to relying on a pages own `definePageMeta({ layout: ...' })`?

javascript

<template>
  <NuxtLayout name="admin">
    <NuxtPage />
  </NuxtLayout>
</template>

Aname has no effect on <NuxtLayout> — the layout is always determined exclusively by each individual page's own definePageMeta, regardless of any prop passed here

BThis is invalid syntax — <NuxtLayout> never accepts a name prop; only definePageMeta({ layout }) can select a layout

CPassing name="admin" explicitly here forces every page rendered inside this <NuxtLayout> to use the admin layout, overriding whatever any individual page's own definePageMeta({ layout }) might otherwise specify — useful for a scenario like wrapping an entire admin section (perhaps in a custom app.vue structure, or a layer) with one consistently-applied layout regardless of what each individual admin page declares for itself

Dname="admin" only affects the layout's visible label in Vue DevTools — it has no effect on which actual layout component renders

Why doesn't this page need an explicit import statement for ProductCard?

javascript

components/
  ProductCard.vue
pages/
  index.vue

ANuxt automatically scans the components/ directory at build time and registers every component it finds there, making them available by name (derived from the filename, ProductCard.vue → <ProductCard>) in any page or component throughout the app, without any explicit import statement being written anywhere

BThis only works if ProductCard.vue is also manually registered in nuxt.config.ts's components array — the file's location in components/ alone isn't sufficient

CThis works because Vue itself auto-imports any component whose filename matches a tag used in a template — this is standard Vue behavior, not something specific to Nuxt

DProductCard is only auto-imported inside other components under components/ — pages under pages/ still require an explicit import

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