Vue Mastery

NUXT CHEAT SHEET 1/2

Pages

use NuxtPage in pages/index.vue

app.vue to render localhost:3000/
the page <template>
index.vue is
<h1>Home</h1> Home
the root route
app.vue ... ... by default
</template>
<template>
<NuxtPage />
</template> pages/about.vue
localhost:3000/about
<template>
<h1>About</h1> About
...
</template> ...

Routing
Pages with Layout Dynamic Route
e.g.
layouts/default.vue /about
[foo].vue params:
<template> {foo: "about"}
<div>
<nav> Mixed Route
<NuxtLink to="/">Home</NuxtLink> e.g.
<NuxtLink to="/about">About</NuxtLink> /my-inventory
</nav> my-[foo].vue params:
<main> {foo: "inventory"}
the page content
<slot />
</main> will appear here Optional Route
</div> e.g.
</template> /
[[foo]].vue params:
{foo: ""}
app.vue pages/index.vue
Catch-All Route
<template> <template> e.g.
<NuxtLayout> <h1>Home</h1> /profile/image
<NuxtPage /> ...
</NuxtLayout> </template> [...foo].vue params:
</template> {foo: ["profile","image"]}

use NuxtLayout and localhost:3000/ Access Route Params

NuxtPage in app.vue
in app.vue to connect Home | About <script setup>
everything together const params = useRoute().params
</script>
Home
...
no need to import useRoute

Learn Nuxt now with premium courses on VueMastery.com

Visit VueMastery.com to explore our library of Vue courses.
 Vue Mastery

NUXT CHEAT SHEET 2/2

SSR-Compatible Shared State

any composable in this folder gets pages/index.vue

imported to the components no need to import
automatically <script setup>
const width = useWidth()
composables/useWidth.js console.log(width.value)
</script>
export function useWidth() {
return useState('width', () => { pages/about.vue
return 1000
} ) <script setup> same state
} const width = useWidth()
console.log(width.value)
</script>
this function passed to useState will
only get executed on the server

useFetch & API

pages/index.vue

<script setup> remember to use

const { data } = await useFetch('/api/foo') async if you’re
</script> using await in
the function
use useFetch if
you’re fetching fetch from an API file
in a component with the same name the event param
on the server provides the data
of the request
server/api/foo.js

export default defineEventHandler(async (event) => {

return [ 1, 2, 3 ]
})

Rendering Mode Config

Rendering Mode
nuxt.config.js Client-Side Only Rendering Mode
Stale-While-Revalidate
export default defineNuxtConfig({ { ssr: false }
routeRules: { { swr: true }
'/page-name': { ssr: true } Rendering Mode
} Static Generation
Rendering Mode (Default) Rendering Mode
route path })
Server-Side Rendering Incremental Static
{ prerender: true } Regeneration

{ isr: true }

Learn Nuxt now with premium courses on VueMastery.com

Visit VueMastery.com to explore our library of Vue courses.