Community
Friday, May 5th 2023
Improved support for Nuxt on Vercel
Nuxt applications can now take advantage of Vercel KV, ISR, and more.
Posted by
We've been partnering with Nuxt to further integrate the framework with Vercel and support all Vercel products. Nuxt on Vercel now supports:
This builds on the integration with other Vercel products like Functions, Middleware, Image Optimization, and more.
Vercel KV integration with Nitro Storage
Vercel recently launched Vercel KV, a serverless durable Redis store. We've partnered with the Nuxt team to add support for integrating Vercel KV into Nitro, making fast key-value storage available for your Nuxt apps.
In a few lines of configuration, you can now set up a cache with durable storage for your Nuxt application:
export default defineNuxtConfig({ nitro: { storage: { data: { driver: 'vercelKV' } } }})
Nuxt automatically reads the KV_REST_API_URL
and KV_REST_API_TOKEN
environment variables for your KV database. Then, you can easily store data in any event handler:
export default eventHandler(async (event) => { const storage = useStorage('data'); await storage.setItem('userId', 'id');
return { id: await dataStorage.getItem('userId'), };});
View a demo of Vercel KV with Nuxt or see the Nitro docs.
Static and ISR support for Nuxt
Nuxt developers want to choose the best rendering strategy for a given page. With the Nitro 2.4 release, they can now pick between fully static, fully dynamic, or incrementally updated routes with powerful route rules.
export default defineNuxtConfig({ routeRules: { // all routes will be background revalidated (ISR) at most every 60 seconds '/**': { isr: 60 }, // this page will be generated on demand and cached permanently '/static': { isr: true } },});
View a demo of ISR with Nuxt to try out route rules.
Partnering with Nuxt
We're thrilled the Nuxt team has chosen to build nuxt.com, nuxtlabs.com, nuxt.studio, volta.net, and more with Vercel.