Security is a topic that is often overlooked in the frontend world. But at least for you all - no longer! To make sure we cover Security for Vue and Nuxt applications as broad as possible, Michael and Alex are joined by Jakub Andrzejewski, who is not only a Senior Frontend Developer but also author of the Nuxt Security Module. We cover not only the module but also how to avoid common security mistakes as a Vue developer and how to protect your applications from vulnerabilities, and which are the most common ones.

Of course, we can't miss out on the State of Vue.js Survey, which is currently running and was co-created by Jakub as well!

Besides talking about the Security and the State of Vue.js, we also discuss how Jakub got into Vue.js at first and how he perceived the transition to Vue 3 and the Composition API.

Enjoy the episode!

Our Guest

Jakub Andrzejewski

• Blog
• Bluesky
• Twitter

Chapters

• (00:00) - Welcome to the DejaVue Podcast
• (00:12) - Introducing our Guest
• (02:07) - The Nuxt Ecosystem Team
• (07:47) - How did you get into Vue.js
• (13:09) - Transition to Vue 3 and Composition API
• (17:00) - React Livecoding as a Vue Dev
• (18:10) - vue-vine for multiple components
• (20:34) - State of Vue
• (30:30) - The Nuxt Security Module
• (37:36) - Will the module project you from everything?
• (41:59) - The ShipFast incident
• (45:05) - Ethical Hacking and NPM Security Vulnerabilities
• (49:24) - Privilege Escalation at Shopify
• (51:45) - Nuxt Security without a Server
• (54:28) - More Logic in the Frontend
• (55:38) - Nothing to Hide?
• (57:28) - Security Mistakes to Avoid as a Vue Developer
• (01:02:13) - Wrapping up

Links and Resources

• Fill out the State of Vue.js Survey
• And also the State of JS Survey 🙌

• Nuxt Security Module
• Vue Vine
• State of Frontend (Results out)
• OWASP Top 10
• DejaVue #E006 - Nuxt Server Components (with Julien Huang)
• Shipfast incident writeup

Your Hosts

Alexander Lichter

• Twitter
• YouTube
• Website

Michael Thiessen

• Twitter
• YouTube
• Website

---

Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.

All of you have seen users do weird things with your application and running into strange scenarios - who can't relate to this?
For this and many other reasons, the right way of error handling is important in you application. Join Michael and Alex on a discussion of the different ways one can handle errors in their application.
That includes not always showing an error page, but also handling errors request-based or component-based!

On that note, error messages and how to write decent ones that are helpful for the users are discussed, as well as how components like NuxtErrorBoundary work under the hood

Enjoy the episode!

Chapters

• (00:00) - Welcome to DejaVue
• (01:22) - The good old error page
• (01:58) - Write good error messages!
• (03:11) - The Vue global error handler
• (05:07) - Server vs. Client Errors in Nuxt.js
• (08:34) - The vue:error hook
• (09:05) - Global error handling for $fetch and interceptors
• (11:10) - Throw unhandled errors in Prod with Vue 3.5?
• (13:07) - Component-level error handling
• (16:33) - NuxtErrorBoundary
• (18:01) - defineAsyncComponent
• (18:53) - Request-based error handling
• (21:45) - New default values in Nuxt 4
• (23:30) - Error Tracking
• (26:33) - Actually handling the errors
• (28:54) - Wrapping up

Links and Resources

• State of JS Survey
• Sentry
• Bugsnag
• Rollbar
• Michael's talk on error handling in Nuxt
• Michael's article on error handling in Nuxt*
• And another deep dive into Nuxt 3 error handling*
• DejaVue #E034 - Data Fetching in Vue and Nuxt
• Vue Issue regarding throwing errors in production (low level)
• Vike
• NuxtErrorBoundary component Source Code
• ofetch
• Zod
• Valibot
• Nuxt 4 error and data will be undefined by default
• Create abstractions for your headings and buttons

Your Hosts

Alexander Lichter

• BlueSky
• Twitter
• YouTube
• Twitch
• Website

Michael Thiessen

• Twitter
• YouTube
• Website

Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.

Data fetching is a crucial part of any web application. In this episode of DejaVue, we discuss the different ways to fetch data in Vue.js and Nuxt.js, and how to cache it.

We also talk about the experimental Suspense feature in Vue.js and how it can be used to improve the user experience, as well as how to handle third-party scripts in your application.

In addition, Nuxt's data fetching options are discussed, including the $fetch method, useFetch, useAsyncData and the useNuxtData composable. Finally, we cover server-side caching in Nuxt.js, including route rules, defineCachedEventHandler, and defineCachedFunction.

Enjoy the episode!

Chapters

• (00:00) - Welcome to DejaVue
• (00:50) - Which topics should be covered next?
• (01:56) - This episodes topic - Data Fetching
• (04:13) - Two ways of client-side caching
• (06:17) - What is Data Fetching actually - and which library to use?
• (08:19) - Suspense in Vue.js
• (14:03) - Third Party Scripts
• (17:38) - Data fetching basics in Nuxt.js
• (20:28) - $fetch vs useFetch
• (23:27) - $fetch request deduplication on the server
• (24:43) - Caching in Nuxt.js
• (28:18) - routeRules of server-side caching
• (29:38) - defineCachedEventHandler / defineCachedFunction
• (32:19) - Unstorage for storing the cached files
• (35:41) - useNuxtData
• (40:26) - Why does Nuxt offer more data fetching options?
• (45:32) - Wrapping up

Links and Resources

• LAST CHANCE 15% discount for the VueConf Toronto* with code DEJAVUE

• ofetch
• ky
• Suspense in Vue
• Data Loaders
• DejaVue #E030 - Pinia and Data Loaders (with Eduardo San Martin Morote)
• nuxt-workers
• Partytown
• squoosh.app
• DejaVue #E001 - The Need for SSR
• You are using useFetch wrong
• DejaVue #E003 - Nitro: The Next Generation Server Toolkit
• Caching in Nitro
• Client side caching with getCachedData
• Composable Caching Utils issue
• Route Rules in Nuxt
• DejaVue #E002 - Building a Nuxt.js SaaS in less than a week (with Harlan Wilton)

Your Hosts

Alexander Lichter

• BlueSky
• Twitter
• YouTube
• Twitch
• Website

Michael Thiessen

• Twitter
• YouTube
• Website

Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.