Scribd
Upload
78 views

Nuxtjs Cheat Sheet

This document provides a cheat sheet on Nuxt features and configuration. It outlines how to structure pages and use layouts to share common elements. It also describes routing conventions like dynamic, mixed, optional and catch-all routes. Additionally, it shows how to manage shared state across pages using composables and fetch API data using useFetch. Finally, it outlines different rendering modes in Nuxt like server-side rendering, static generation and on-demand static generation.

Uploaded by

Oumaima Souguir
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
78 views

Nuxtjs Cheat Sheet

This document provides a cheat sheet on Nuxt features and configuration. It outlines how to structure pages and use layouts to share common elements. It also describes routing conventions like dynamic, mixed, optional and catch-all routes. Additionally, it shows how to manage shared state across pages using composables and fetch API data using useFetch. Finally, it outlines different rendering modes in Nuxt like server-side rendering, static generation and on-demand static generation.

Uploaded by

Oumaima Souguir
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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
On-Demand SSG
export default defineNuxtConfig({ { ssr: false }
routeRules: { { swr: true }
'/page-name': { ssr: true } Rendering Mode
} Static Generation Rendering Mode
}) Rendering Mode (Default)
route path On-Demand SSG
Server-Side Rendering
{ prerender: true } with Revalidation

{ swr: 60 }

Learn Nuxt now with premium courses on VueMastery.com


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

You might also like