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!
👉🏻 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:
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();34const user = nuxtApp.payload.data.userData;5</script>
Try it yourself in the following StackBlitz example:
