2. Nuxt Usage

Nuxt 3

Key Files and Directories

Nuxt 4 Compatibility

Nuxt 4 is imminent and the current Nuxt 3 has a mode that will allow you to future proof the directory structure. Opt-in to the v4 directory structure which means they are going to move the client code from the root to the app folder. You can enable Nuxt 4 compatibility adding the future key in the nuxt.config.ts file.

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

Nuxt 4 Changes

Nuxt 4 Unchanged

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

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