The BEST way to proxy your API in Nuxt

21min 12s
29 décembre 2023

Description

➡️ Proxying routes to your back-end or third party APIs is a common practice! Over the last two years, various strategies came up in Nuxt. But not all of them work equally will. To figure out which two strategies are the recommended ones, we have a look at the four most common strategies, their shortcomings and which ones I would recommend to use! Key points: ✅ How a successful proxy strategy looks like 🔢 All common strategies - From Vite's proxy to a Nitro proxy endpoint ‼️ Which strategies to use and how to implement them Links: 📺 Nuxt vs. Nitro: https://www.youtube.com/watch?v=DkvgJa-X31k 🔗 GH discussion around proxying: https://github.com/nuxt/nuxt/discussions/15907?sort=old 📺 Common runtimeConfig mistakes: https://www.youtube.com/watch?v=_FYV5WfiWvs 🔗 H3 JSDoc: https://www.jsdocs.io/package/h3 🔗 Code: https://github.com/manniL/alexander-lichter-proxy-nuxt Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up! 🌐 Connect further: Website: https://www.lichter.io Twitter/X: https://twitter.com/TheAlexLichter Twitch: https://www.twitch.tv/TheAlexLichter Chapters: 00:00 Intro 00:54 Discussion around proxying 01:30 Setup & demo app 02:57 Goals for our proxy solution 04:14 Strategy 1 - Vite's proxy 07:30 Strategy 2 - Nitro's devProxy 10:16 Strategy 3 - Proxy routeRule 13:30 Strategy 4 - Nitro proxy API endpoint 19:28 Summary and what to use