Guides

Building Nuxt 3 server routes and API layers with Vercel...

This guide provides a step-by-step implementation strategy for building a performant Nuxt 3 application with server-side rendering, state management, and AI integration, addressing common pain points for European Vue.js teams.

2-3 hours5 steps

Configure SSR and API Routes

Set up server-side rendering and create API routes in /server/api. Use useAsyncData for data fetching and ensure proper SSR hydration.

nuxt.config.ts

export default defineNuxtConfig({
  ssr: true,
  modules: ['@nuxtjs/tailwindcss'],
  devtools: { enabled: true }
})

⚠ Common Pitfalls

•Forgetting to set ssr: true for SSR-optimized routes
•Not handling loading states in useAsyncData

Implement Pinia with Server-Side State

Create a Pinia store with server-side data persistence. Use $fetch for API calls and ensure state hydration between client and server.

stores/app.ts

import { defineStore } from 'pinia';

export const useAppStore = defineStore('app', {
  state: () => ({
    config: null as any,
    loading: false
  }),
  actions: {
    async fetchConfig() {
      this.loading = true;
      this.config = await $fetch('/api/config');
      this.loading = false;
    }
  }
});

⚠ Common Pitfalls

•Storing sensitive data in client-side stores
•Not using $fetch for server-side API calls

Integrate AI Features with Edge Functions

Create edge functions for AI processing. Use Nuxt 3's server routes with AI SDKs and ensure proper environment variable management.

server/api/ai.ts

import { defineEventHandler } from 'h3';
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.AI_API_KEY
});

export default defineEventHandler(async (event) => {
  const { prompt } = await readBody(event);
  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    messages: [{ role: 'user', content: prompt }]
  });
  return response.choices[0].message;
});

⚠ Common Pitfalls

•Exposing AI API keys in client-side code
•Not setting up proper CORS for edge functions

Optimize Bundle Size

Implement code splitting with Nuxt's auto-imports and use tree-shaking for AI SDKs. Analyze bundles with webpack-bundle-analyzer.

nuxt.config.ts

export default defineNuxtConfig({
  imports: {
    dirs: ['stores', 'composables']
  },
  build: {
    analyze: true
  }
})

⚠ Common Pitfalls

•Including full AI SDK bundles in client-side code
•Missing tree-shaking configuration

Deploy with Vercel Edge

Configure Vercel for edge deployment. Set environment variables and optimize build settings for Nuxt 3 SSR.

package.json

{
  "name": "nuxt-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "start": "nuxt start"
  },
  "vercel": {
    "builds": [
      {
        "src": "./",
        "use": "@vercel/nuxt"
      }
    ],
    "env": {
      "AI_API_KEY": "your-key"
    }
  }
}

⚠ Common Pitfalls

•Incorrect Vercel build configuration
•Missing environment variables in production

What you built

By following these steps, developers can create scalable Nuxt 3 applications with optimized SSR, proper state management, and secure AI integration. Validate each stage with performance audits and ensure environment variables are properly managed for production deployment.