Nuxt 3 Kitchen Sink

Nuxt 3 Kitchen Sink is an open-source boilerplate built by Vercel that demonstrates every core Nuxt 3 feature working together, styled with Tailwind CSS, and deployed to Vercel with zero configuration.

What is Nuxt 3 Kitchen Sink?

Nuxt 3 Kitchen Sink is a starter template that bundles the Nuxt 3 framework with Tailwind CSS to showcase how each Nuxt 3 feature operates when hosted on Vercel. The project lives in the Vercel GitHub organization and is open-source, meaning you can clone it, modify it, and redeploy it freely. It takes a standard Nuxt 3 application and adds working examples of server-side rendering, server routes, teleports, middleware, edge rendering, the Nuxt loading indicator, NuxtLink, NuxtContent, and data fetching. The template is pre-configured for a one-click deployment through Vercel, which automatically handles build and runtime settings.

Key Features

• Server-Side Rendering (SSR) — Pages are pre-rendered on the server by default, improving SEO and initial load speed.
• Server Routes — The template includes example server endpoints built with Nitro, Nuxt 3's server engine, demonstrating how to handle API requests.
• Teleports — Shows how to use Vue's Teleport component to move elements like modals or notifications to a different part of the DOM.
• Middleware — Example route middleware illustrates how to run code before navigation, useful for authentication or redirects.
• Edge Rendering — With Vercel's deployment, the app can run on the edge network, serving content from globally distributed nodes.
• Nuxt Loading Indication — Includes the built-in progress bar that appears during page transitions for better user feedback.
• NuxtLink and NuxtContent — Uses NuxtLink for client-side navigation and integrates NuxtContent for managing markdown-based content.
• Data Fetching — Demonstrates composables like useFetch and useAsyncData to load data during SSR and hydration.
• Tailwind CSS — Styling is handled entirely with Tailwind utility classes, so there is no separate CSS file to manage.
• Zero Configuration on Vercel — The included Vercel button clones the repo and sets up a live demo instantly, and the project has no required environment variables.

Who is it for?

• Nuxt 3 learners — Developers who want to see each framework feature implemented in a small, runnable project rather than reading isolated docs.
• Developers starting a Vercel-hosted project — Anyone who wants a clean Nuxt 3 base that deploys without fiddling with vercel.json or build settings.
• Teams prototyping — A kitchen-sink layout makes it easy to copy feature snippets into a new app and verify they work on the edge network.

Use cases

• Learning Nuxt 3: Clone the repo, run pnpm i and pnpm dev, and inspect how each feature interacts at localhost:3000.
• Bootstrapping a new application: Remove the demo components and use the remaining structure as a starting point for a custom Nuxt 3 site.
• Evaluating Vercel edge rendering: Deploy with the one-click button and compare response times from different regions against a traditional server setup.

How does the template work?

After cloning the repository, install dependencies with pnpm i and start the development server with pnpm dev. For production, click the "Deploy with Vercel" button in the README to create a new project with the template's repository URL; Vercel will build and host the app automatically. No environment variables or extra configuration steps are required.

Pricing

The template is open-source, so it is free to use and modify. There are no paid tiers or licenses mentioned on the page; your only costs would come from hosting it on Vercel if you exceed the free tier.

FAQ

Is Nuxt 3 Kitchen Sink free?

Yes, the template is open-source and published under the Vercel organization on GitHub. You can clone it, use it in commercial projects, and modify it without paying anything. There are no premium features or licensing restrictions stated in the repository.

Which Nuxt 3 features are included?

The README lists nine key features: server-side rendering, server routes, teleports, middleware, edge rendering, Nuxt loading indication, NuxtLink, NuxtContent, and data fetching. This covers the main capabilities developers need when starting a Nuxt 3 project.

How do I run the template locally?

Run git clone https://github.com/vercel/nuxt3-kitchen-sink.git, then cd nuxt3-kitchen-sink, install dependencies with pnpm i, and start the dev server with pnpm dev. The application will be available at http://localhost:3000.

Does it require any configuration for Vercel?

No. The template is designed for zero configuration on Vercel. Using the provided Deploy button, Vercel will automatically detect Nuxt 3 and configure the build step. The repository metadata shows it is intended to work with Vercel's platform as-is.