Weekly Vue News #170 - Fetch Data from the Server Before App Start

Weekly Vue News #170 Fetch Data from the Server Before App Start View online Hi 👋 Last week was a bit different — I started and finished my trailer driving license in one week! Didn't have much time for new projects, but I've included a useful Nuxt tip on how to fetch data from the server before your app starts. Hope you find it helpful! Have a lovely week ☀️ Vue 📕 How To Speed Up Your Vue App With Server Side Rendering 👉🏻 Vue is a framework built for client-side applications. 👉🏻 Learn how to optimize page load performance with server side rendering. 📕 Import .md file as Vue.js Components 👉🏻 This Vite plugin adds support for importing a Markdown file as a Vue component. 👉🏻 Works with Vue 2 & 3. 📕Common Vuejs Development Mistakes 👉🏻 Using non unique Id's for v-for loops 👉🏻 Non reactive value as a dependency 👉🏻 Replacing reactive value 📕 How to Access Vue Refs Defined in Script Setup within Unit Tests* 👉🏻 In limited situations, you might need to read a component's reactive data from within your unit tests. 🛠️ Shadcn/Vue Landing Page Template 👉🏻 12+ sections 👉🏻 Dark mode 👉🏻 Responsive design 👉🏻 User-friendly interface 👉🏻 Open source License Nuxt 📕 Getting Started with Nuxt Image* 👉🏻 Learn how to optimize images effortlessly in your Nuxt app. 👉🏻 Discover how to transform, cache, and resize images dynamically, improving performance with just a few lines of code. 📹 I MIGRATED a Next.js application to Nuxt.js in 1 HOUR 👉🏻 A lot of people wondered how easy it is to switch over from React and Next.js to Vue and Nuxt.js. 👉🏻 In this video you'll see - actually it isn't that difficult. 📹 Customizing Images in Nuxt 👉🏻 Image optimization can be hard if you don't know what you're doing. 👉🏻 The Cloudinary Nuxt module is one way to make this easier on you. 👉🏻 They have tons of cool transformations that you can make directly in your code to edit your images on the fly. 🛠️ nuxt-workers 👉🏻 A tiny Nuxt module to make using the Workers API type-safe and automatic within your apps. 👉🏻 Zero-config - just drop files in a `workers/``workers/` directory 👉🏻 Isomorphic - works server + client 👉🏻 Fully typed 👉🏻 Auto-imported 💡 Nuxt Tip: Fetch Data from the Server Before App Start In configuration driven applications it's a common requirement to load a configuration from an API before the app starts. In these scenarios you usually want to fetch the data on the server to avoid leaking the endpoint URL or API key to the client. In Nuxt 3+ you can achieve this by using a server plugin (plugins/init.server.tsplugins/init.server.ts) and providing the data in the Nuxt payload: 1export default defineNuxtPlugin(async (nuxtApp) => { 2 let config = null; 3 4 try { 5 const response = await $fetch( 6 'https://your-api.com/configuration' 7 ); 8 config = response.data; 9 } catch (error) { 10 console.error('Failed to fetch configuration', error); 11 } 12 13 nuxtApp.payload.data = { 14 ...nuxtApp.payload.data, 15 configuration: config, 16 }; 17}); 18 With the filename suffix .server.ts.server.ts we tell Nuxt to run this plugin only on the server. The plugin fetches the configuration from the API and adds it to the Nuxt payload. You can then access the configuration in your components like this: 1<script setup lang="ts"> 2const nuxtApp = useNuxtApp(); 3 4const user = nuxtApp.payload.data.userData; 5</script> Try it yourself in the following StackBlitz example: ✨ Open Demo 📅 Events Nuxt Nation (12 - 13 November 2024, Virtual Conference) VueConf Toronto (18 - 20 November 2024, Toronto, Canada) Vuejs Amsterdam (12 - 13 March 2025, Amsterdam, Netherlands) 💬 Quote of the week 🧑🏻‍💻 In Other News 📕 My solar-powered and self-hosted website 👉🏻 This developer describes his experiment of hosting a website entirely on solar power using a Raspberry Pi. 📕 HTML for People 👉🏻 A friendly approach to building websites for anyone who's looking to get started. 📕 Using AI Generated Code Will Make You a Bad Programmer 👉🏻 Perspective on when and how you should and should not be using AI while programming. 🛠️ Simple Icons 👉🏻 3216 free SVG Icons of popular brands. 😂 Fun 🔗 Want more Vue & Nuxt content? More Exclusive Vue Tips: Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Weekly Vue & Nuxt Videos: You must subscribe Alexander Lichter's YouTube channel if you are interested in Vue & Nuxt. DejaVue Podcast: A weekly podcast about Vue.js and the ecosystem around it. Comments? Join the discussion about this issue in our Discord community. Until next week, Michael Hoffmann (Curator) To support me: 😘 Recommend the newsletter to your friends: it really helps! 💸 Sponsor this newsletter 🧵 Repost the latest X thread 📨 Reply to this email: feedback is welcome * Some of my links are affiliate links; if you make a purchase, I gain a small percentage at no extra cost. Thank you for supporting my newsletter. Unsubscribe Holzapfelkreuther Str. 19, 81375 Munich, Germany