Skip to content

Latest commit

 

History

History
549 lines (372 loc) · 10.9 KB

slides.md

File metadata and controls

549 lines (372 loc) · 10.9 KB
Raw
theme title website handle favicon highlighter lineNumbers layout transition
./theme
Nuxt's Hidden Treasures
lichter.io
TheAlexLichter
shiki
true
intro
fade

Hidden Treasures

8 Gems Every Nuxt Developer Should Know!

Nuxt Nation 2023

<style> h1 { @apply !text-5xl; } h2 { @apply !text-3xl !mt-16 !mb-32; } h3 { @apply !text-base; } </style>

layout: two-cols heading: About me

Alexander Lichter

Categories

  • Delightful Debugging
  • Crisp Code Cleanup
  • Promising Performance Patches
  • Outstanding Opportunities

Delightful Debugging

Debugging

window.useNuxtApp()

Delightful Debugging

  • In Nuxt 2, we had window.$nuxt (or a similar version when $nuxt was renamed)
  • In Nuxt 3, we have __unctx__.get('nuxt-app').use()
  • Or now better: window.useNuxtApp()

window.useNuxtApp() - Security issues?!

Delightful Debugging

Is this a security risk!?

No!

Figuring out what is server-rendered

Delightful Debugging

  • When using SSR (doesn't matter if SSG, dynamic SSR or similar), you might want to know if it works as expected
  • window.__NUXT__.serverRendered gives a great indication
  • But more importantly: You might want to know what part of the site is server-rendered
  • view-source to the rescue!
  • Let's go to https://dicsord.com/ and check it!

Crisp Code Cleanup

Custom auto Imports

Crisp Code Cleanup

  • With Nuxt, you can auto import composables, components and utils
  • You can customize these auto imports, e.g. to:
    • Import components from other folders/with other prefixes
    • Import content from TS/JS files from different directories automatically
    • Import exports from packages automatically
  • How? With the help of unimport in Nuxt
  • In-depth explanation of this feature in this video

Live coding!

Custom Auto Imports - Example

Also in the GitHub repository (live coding)

export default defineNuxtConfig({
  imports: {
    dirs: ['./constants'],
    presets: [
      {
        from: 'date-fns/addDays',
        imports: [
          { name: 'default', as: 'addDays' }
        ]
      }
    ]
  },
  hooks: {
    "components:dirs": (dirs) => {
      dirs.push({ path: '~/app-components', prefix: 'App'})
    }
  }
})

Typed Pages

Crisp Code Cleanup

  • When using TypeScript, you can now infer the routes of your applications!
  • Works for <NuxtLink>, navigateTo and router.push
  • const route = useRoute('route-name') will give you typed parameters too 🎉
export defineNuxtConfig({
  experimental: {
    typedPages: true
  }
})

Bonus content

Crisp Code Cleanup

  • Remember shamefully-hoist when using PNPM?
  • You don't need it anymore! 🎉
  • Just make sure to install vue and vue router dependencies along Nuxt
  • Also, some modules might need an update for that
  • This should happen very quickly though
{
  "dependencies": {
    "nuxt": "^3.8.0",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  }
}

Promising Performance Patches

getCachedData

Promising Performance Patches

  • This landed in Nuxt 3.8.0
  • It allows you to avoid re-fetches of data on the client-side
  • You can define a getCachedData function in your useFetch or useAsyncData composables
  • It can return cached data or nullish value
  • The latter will trigger a fetch of the data

getCachedData - Example

Promising Performance Patches

<script setup lang="ts">
  const nuxtApp = useNuxtApp()
  const { data } = await useFetch<any>('https://icanhazdadjoke.com/', {
    headers: { Accept: 'application/json' },
    getCachedData: key => nuxtApp.payload.data[key] || nuxtApp.static.data[key]
  })
</script>

<template>
  <div>
    {{ data.joke }}
  </div>
</template>

nuxi analyze

Promising Performance Patches

  • Was mentioned before during the panel already.
  • This command is super helpful to analyze your Nuxt bundle
  • Find out about:
    • Non-treeshakeable dependencies
    • Which code is chunked how
    • What is actually bundled

pnpm nuxi analyze is all you need!

nuxi analyze - Example

Promising Performance Patches

Outstanding Opportunities

Environment-specific configuration

Outstanding Opportunities

  • Ever wanted to change your nuxt.config.ts based on the environment?
  • e.g. only add certain modules or settings in dev mode but not in production
  • What if...
export default defineNuxtConfig({
  // your default settings
  modules: ['@nuxt/content'],
})

Environment-specific configuration

Outstanding Opportunities

  • Ever wanted to change your nuxt.config.ts based on the environment?
  • e.g. only add certain modules or settings in dev mode but not in production
  • What if...
export default defineNuxtConfig({
  // your default settings
  modules: ['@nuxt/content'],
  // The magic happens here
  $development: {
    // Your additional settings (merged with default) for dev
    app: {
      baseURL: 'my-prod-url'
    }
  }
})

Environment-specific configuration

Outstanding Opportunities

  • Thanks to c12, this is possible!
  • Useful for quite some scenarios
  • Change settings for your test scenarios, e.g. point your baseUrl to the nitro API
    • Then mock the APIs via nuxt-vitest and check if it works as expected
  • Provide different settings for different environments in general
  • Ensure internal proxies/redirects don't leak into prod
  • And so on...

layout: intro

🤯🤯🤯

Hooks

Outstanding Opportunities

Nuxt and Nitro Hooks

Outstanding Opportunities

  • Change the behavior of the framework itself
  • Add your own logic "in between"
  • Hooks are available for Nuxt and Nitro, at build-time and at runtime
  • And you can even create your own hooks and call them
  • All hooks for Nuxt and Nitro can be found in the docs! 🎉

Nitro Hook Example

Outstanding Opportunities

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('error', (error) => {
    // Receive any kind of error here and deal with it
    // For example send them to an error tracking service like Sentry
    Sentry.captureException(error)
  })

  // Extend Nitro's context (don't forget to augment the types though)
  nitroApp.hooks.hook('request', (event) => {
    event.context.$sentry = Sentry
  })

  nitroApp.hooks.hookOnce('close', () => Sentry.close(2000))
})

Source (^shortened for the sake of brevity)

layout: two-cols heading: Summary clicks: 11

  • There are way more than just 8 Nuxt gems around
  • But these are the ones that are
    • not as well-know among many devs
    • helpful in your upcoming projects
    • worth to know

layout: intro

Thanks a lot to my sponsors!

My GitHub sponsors

layout: two-cols heading: Thank you for your attention!

Alexander Lichter

<style> ul { @apply space-y-2 mt-10 text-xl h-full; } </style>

layout: intro hideLogoInCorner: true

Slides / Repo

<style> ul { @apply list-none!; } </style>