Building Surewin: A Multi-Language Nuxt.js Website with Resend Email Integration

The Challenge: Multi-Language Support Without Complexity

Surewin, a Canadian business, needed a website that could serve customers in multiple languages. Their requirements were clear:

• Support for English, Chinese (Traditional), and French to reach diverse Canadian markets
• Contact form with reliable email delivery for customer inquiries
• Fast global performance for visitors from different regions
• Easy content management without requiring technical knowledge
• Cost-effective hosting to keep operational expenses low

I chose Nuxt.js for this project because of its excellent internationalization (i18n) support and static site generation capabilities. Here's how I built it.

Why Nuxt.js for Multi-Language Sites

Nuxt.js offers several advantages for multi-language websites:

• Built-in i18n module: The @nuxtjs/i18n module handles routing, language detection, and SEO-friendly URL structures automatically
• Static site generation: All pages pre-rendered as static HTML for each language, ensuring fast loads
• SEO optimized: Automatic hreflang tags, language-specific meta tags, and proper URL structures
• Hot module replacement: Developers see changes instantly during development
• Vercel ready: Seamless deployment to Vercel's edge network

Setting Up Multi-Language Support

The first step was configuring Nuxt.js with the i18n module. I structured the locales with three language files:

Language Configuration

I created separate JSON files for each language containing all translatable strings:

• locales/en.json for English content
• locales/zh.json for Chinese (Traditional) content
• locales/fr.json for French content

Each file contains the same keys with translated values. The i18n module automatically loads these based on the user's language preference.

URL Structure

For SEO, each language has its own URL prefix:

• / - Default language (English)
• /zh - Chinese Traditional
• /fr - French

This structure ensures Google indexes all language versions correctly and serves the right content to users searching in their preferred language.

Language Switcher Component

I built a language switcher that allows users to change languages instantly. The component:

• Stores preference in cookies so returning visitors see their preferred language
• Updates all content dynamically without page reload
• Persists across navigation as users browse different pages
• Maintains current page context - switching language keeps you on the same page

Vercel Deployment and Edge Performance

Deploying to Vercel was straightforward. Here's why Vercel was the right choice:

• Global edge network: Static pages cached at 300+ edge locations worldwide
• Automatic HTTPS: SSL certificates provisioned automatically
• Git integration: Every push to main branch triggers automatic deployment
• Zero configuration: Nuxt.js detected automatically, optimal build settings applied
• Free tier covers the traffic: Surewin's expected traffic fits well within Vercel's free tier

With static site generation, each language variant is pre-rendered at build time. This means:

• No server-side rendering latency - pure HTML served instantly
• No database queries on page load - everything is pre-built
• Edge caching - pages delivered from the nearest server to each visitor

Integrating Resend for Email Delivery

The contact form needed reliable email delivery. I chose Resend for several reasons:

• Developer-friendly API: Simple REST API with excellent documentation
• Reliable delivery: High inbox placement rates, emails don't end up in spam
• Free tier: 3,000 emails per month free - perfect for small business contact forms
• Email templates: Support for HTML templates with dynamic content
• Webhooks: Delivery tracking for monitoring email status

Contact Form Implementation

The contact form works as follows:

• Frontend: Nuxt.js form with validation (name, email, phone, message)
• API route: Serverless function deployed on Vercel processes the form
• Resend API: Sends email to Surewin's team with inquiry details
• Confirmation: Auto-reply sent to the customer confirming receipt

The serverless function runs in Vercel's edge network, ensuring low latency regardless of where the visitor is located.

Tailwind CSS for Rapid Styling

I used Tailwind CSS for styling because it integrates well with Nuxt.js and provides:

• Responsive design out of the box: Mobile-first approach works perfectly for modern websites
• Dark mode support: Easy to add if needed in the future
• Small bundle size: Only used styles included in production build
• Consistent design language: Tailwind's utility classes ensure visual consistency

SEO Optimization for Multiple Languages

Multi-language SEO requires special attention. Here's what I implemented:

Technical SEO

• hreflang tags: Automatically generated by Nuxt i18n, telling Google which language version to show in search results
• Alternate links: Each page links to its equivalents in other languages
• Language-specific meta tags: Title, description, and keywords unique to each language
• XML sitemap: Includes all language versions of every page
• Robots.txt: Configured to allow all language variants

Content SEO

• Translated content: Not machine-translated, but professionally written content for each language
• Cultural adaptation: Content adjusted for cultural context, not just language
• Local keywords: Keyword research for each target market

The Results: Fast, Multilingual, Reliable

The Surewin website launched with impressive metrics:

• Page load time: Under 1 second for all language variants
• Lighthouse score: 95+ across performance, accessibility, and SEO
• Edge locations: 300+ worldwide through Vercel
• Email delivery: 99%+ inbox placement via Resend
• Hosting cost: $0/month within Vercel and Resend free tiers

Key Takeaways

Building a multi-language website doesn't have to be complicated. Here's what made this project successful:

• Choose the right framework. Nuxt.js with i18n module handled multi-language routing seamlessly
• Static site generation is powerful. Pre-rendering pages for each language ensures fast loads and simple hosting
• Modern email services are reliable. Resend delivers emails that actually reach inboxes, with a generous free tier
• Vercel simplifies deployment. Zero-configuration deployment with global edge caching
• Don't forget SEO for each language. Proper hreflang tags and language-specific content are essential for search visibility

The Surewin website now serves customers in their preferred language, delivers contact form submissions reliably, and costs nothing to host. It's a solution that scales with their business without scaling their costs.