This is a tiny demo to show off Nuxt's route rules integration with a Mobile App built on top of Ionic's Capacitor and deployed on Vercel's infrastructure.
Here are a few different pages to try:
- / - revalidated every 60 seconds, in the background
- /static - generated on demand and then cached permanently
- /prerendered - generated at build time and cached permanently
- /dynamic - always fresh
The only config required:
export default defineNuxtConfig({
routeRules: {
// all routes (by default) will be revalidated every 60 seconds, in the background
'/**': { isr: 60 },
// this page will be generated on demand and then cached permanently
'/static': { isr: true },
// this page is generated at build time and cached permanently
'/prerendered': { prerender: true },
// this page will be always fresh
'/dynamic': { isr: false },
// you can do lots more with route rules too!
'/redirect': { redirect: '/static' },
'/headers': { headers: { 'x-magic-of': 'nuxt and vercel' } },
'/spa': { ssr: false },
},
})Enable corepack:
npx corepack enableMake sure to install the dependencies:
pnpm installIt's all prior art.
🐢 This is a direct fork of nuxt-vercel-isr by @DanielRoe. 🐢 Which was inspired by nuxt-on-the-edge by @pi0 🐢 Which itself was inspired by other projects.
Start the development server on http://localhost:3000
pnpm devThe easiest way to deploy your app is to link the repo to your Vercel account. Alternatively, you can create a production build locally using pnpm build.
Checkout the deployment documentation for more information.