Nuxt Cheat Sheet

Nuxt 3

Definitions

• Server Side Rendering - SSR - Server runs the JavaScript, fetches data, modifies the HTML document before sending to the browser to render.
• Client Side Rendering - CSR - Server sends the HTML scaffold document and the JavaScript to the browser. The browser runs the JavaScript, fetches data, and renders the updated HTML document.
• Universal Render - (aka dynamic rendering, or hydrated rendering) is both SSR and CSR.
• Static Site Generation - SSG - Generate the site and upload the pre-rendered site to a static web hosting service
• Web Apps/Single Page Apps (SPA) - single page app like Facebook, Twitter/X
• Hydration is making a static page interactive in the browser. You 'hydrate' a static page, when the client JavaScript is run and document re-rendered.

Setup Nuxt Project

npx nuxi@latest init <project name>

Nuxt Config file

nuxt.config.ts default config file docs

Nuxt Routing

• A route is created automatically for each page in the pages directory. A subdirectory will add a level to the route parameter.
• Use <NuxtPage /> where you want to pages to appear based on route. Typically, this is in the app.vue file, within the <NuxtLayout /> element
• Add a routing page with a parameter you add [] to the filename!
• Add the parameter name inside the brackets like [...slug].vue
• slug means where spaces are dash characters - blog post short name

Layout

A page can belong to a Nuxt Layout which contains the hierarchical structure. This gives all the pages for the Nuxt Layout a common template, script, and style.

• Nuxt uses the layouts directory by default and the file default.vue
• You wrap the <NuxtPage /> with a <NuxtLayout></NuxtLayout> in app.vue like this. The layout and page are dynamic

  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>

You assign custom layouts for a page in the following three ways (using the custom another.vue layout in the code directory)

1. override globally in the <NuxtLayout :name="another" element and name in app.vue
2. On the page in script setup use Nuxt definePageMeta with the name of the layout in the layout property, like this.

definePageMeta({
  layout: 'another'
})

3. On a page you can dynamically update the layout by using setPageLayout() function with the name of the layout Vue router slug, like this.

function enableCustomLayout () {
  setPageLayout('another')
}

Nuxt Modules

You can browse Nuxt modules here. You install a Nuxt specific package according to the instructions.

Component Names

When a component has a compound name you can either name the file as either

• compound-name.vue or
• CompoundName.vue (my preferred) In either case, when coding the component in the <template></template> section of a page the reference would be <CompoundName></CompoundName>

Data fetching

Nuxt has three built in data fetching methods

1. useFetch composable
2. useAsyncData composable
3. $fetch

Nuxt v3 Directories

• public - publicly available assets - icons, images, etc.
• server - server-side code
• pages - Website page components
• components - all the components in your application - auto imported by Nuxt from here
  • note, this directory name that can be updated/customized.
• components/content - Vue components used in content files
• layouts - common layouts like header, every-single page
• composables - small pieces of reusable code or components
• content - blog, code, and ops markdown article files
• .nuxt, node_modules - generative by Nuxt and NPM

v4 Compatibility mode

In Nuxt v3 to future proof for v4 you can run in compatibility mode 4 which uses the anticipated v4 directory structure. The biggest change is separating client code into app folder to make it a sister folder to the server folder.

Enable in nuxt.config.ts

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  }
})

Dir Changes