Scribd Logo
Upload

Welcome to Scribd!

  • 50 views

    Nuxtjs Cheat Sheet

    Uploaded by

    Oumaima Souguir
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Nuxtjs Cheat Sheet

    Uploaded by

    Oumaima Souguir
    50 views2 pages
    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.

    Original Title

    Nuxtjs-Cheat-Sheet

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    50 views2 pages

    Nuxtjs Cheat Sheet

    Uploaded by

    Oumaima Souguir
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 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

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy