Ship faster with pre-built templates

Building a modern web application from scratch means recreating the same features over and over: landing pages, authentication flows, AI integrations, content management systems. It's time-consuming work that keeps you from focusing on what makes your product unique.

This Nuxt 4 boilerplate takes a different approach. Instead of starting from zero, you get a collection of professional, production-ready templates that you can customize and deploy immediately. Let's look at what's included.

Landing page templates

The boilerplate includes six professionally designed landing page templates, each optimized for different use cases. Whether you're launching a SaaS product, promoting an app, or building a marketing site, you'll find a template that fits.

What makes these templates special:

• Conversion-focused design - Each template is built with proven UX patterns that drive action
• Dark mode support - Automatically adapts to user preferences
• Mobile responsive - Looks great on every device
• YAML-based configuration - Customize content without touching Vue components

Instead of spending days building hero sections, feature showcases, and testimonial layouts, you can configure everything through simple YAML files:

hero:
  title: Your product headline
  description: Compelling value proposition
  links:
    - label: Start free trial
      to: /signup
features:
  - name: Fast deployment
    description: Ship in minutes, not weeks
    icon: i-lucide-rocket

View all six landing page templates at /templates/landing-pages in your application.

AI chat templates

AI-powered features are becoming essential, but integrating multiple providers with proper streaming, error handling, and conversation history takes significant effort. The boilerplate includes ready-to-use AI chat templates that work with ChatGPT (GPT-4), Claude (Anthropic), and Grok (xAI).

Two implementations for different needs:

Simple AI interface (shadcn-vue)

Perfect for one-off interactions like form assistants, content generators, or quick Q&A features. Clean, minimal interface with direct streaming.

Full chat application (Nuxt UI)

Complete chat experience with persistent conversations, session management, and message history. Ideal for customer support bots, AI assistants, or interactive tutoring systems.

What's included:

• Multiple AI providers - Switch between OpenAI, Anthropic, and xAI with a dropdown
• Streaming responses - Real-time token-by-token output for better UX
• Conversation history - Full chat persistence with the Nuxt UI version
• Markdown rendering - Formatted responses with syntax highlighting
• Error handling - Graceful fallbacks and retry logic
• Mobile responsive - Works beautifully on all devices

The AI templates use the Vercel AI SDK under the hood, giving you a solid foundation to build on. Whether you're adding a simple chatbot or building a full AI application, the hard work is already done.

Blog and documentation

Content is king, and Nuxt Content makes it powerful. The boilerplate includes pre-configured blog and documentation systems that you're reading right now.

Blog system features:

• Markdown-based - Write posts in familiar markdown syntax
• Rich frontmatter - Author info, categories, images, dates, and SEO metadata
• Automatic routing - Files in content/blog/ become routes automatically
• Full-text search - Built-in search functionality
• Dark mode support - Consistent theming throughout

Documentation system features:

• Navigation generation - Automatic sidebar from folder structure
• Code highlighting - Beautiful syntax highlighting out of the box
• MDC components - Use Vue components directly in markdown
• Table of contents - Auto-generated from headings
• Version control - Everything is git-friendly markdown files

The documentation you're reading was built with this system. It demonstrates navigation, search, content organization, and styling - all ready for you to customize with your own content.

<script setup lang="ts">
// Query blog posts
const { data: posts } = await useAsyncData('blog', () => {
  return queryCollection('blog').all()
})
</script>

<template>
  <div v-for="post in posts" :key="post.id">
    <h2>{{ post.title }}</h2>
    <p>{{ post.description }}</p>
  </div>
</template>

Time saved, value delivered

Let's be honest about what these templates save you:

• Landing pages: 2-3 days designing and implementing responsive layouts → 30 minutes customizing YAML
• AI integration: 1-2 weeks implementing streaming, error handling, and multi-provider support → Add API keys and go
• Blog system: 3-4 days building CMS, search, and routing → Use pre-configured Nuxt Content
• Documentation: 2-3 days setting up navigation, search, and content structure → Start writing immediately

That's roughly 2-3 weeks of development time you can redirect toward features that differentiate your product.

Getting started

All templates are accessible from the /templates route in your application. Browse them, test the functionality, and check the source code to understand the implementation.

The goal isn't to be prescriptive about how you build your application. These templates are starting points - solid, production-ready foundations that you can adapt to your specific needs. Use them as-is, customize them heavily, or learn from them and build something entirely new.

The choice is yours. The time savings are real.