Integrate MongoDB with Nuxt and Vue

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  future:{
    compatibilityVersion: 4,
  },
  runtimeConfig:{
    // Server-side only config. Not exposed to the client
    mongoURI: process.env.MONGODB_URI,
  },
  css:['@/assets/css/main.css'],
  modules: ['@nuxtjs/tailwindcss'],
})

import { MongoClient, type Db } from "mongodb";
let cachedClient: MongoClient | null = null;
let cachedDb: Db | null = null;
export async function connectToDatabase(){
    if (cachedClient && cachedDb){
        return { client: cachedClient, db: cachedDb };
    }
const config = useRuntimeConfig();
const uri = config.mongoURI;
if (!uri){
    throw new Error("Please define the MONGO_URI environment variable inside .env");
}
const client = new MongoClient(uri);
await client.connect();
const db = client.db("sample_restaurants");
cachedClient = client;
cachedDb = db;
console.log("Connected to MongoDB Atlas");
return { client, db };
}

import { connectToDatabase } from "~~/server/utils/mongodb";
export default defineEventHandler(async () =>{
    const { db } = await connectToDatabase();
    const collection = db.collection("restaurants");
    const restaurants = await collection
        .find({})
        .limit(50)
        .project({ name: 1, borough: 1, cuisine: 1, grades: 1})
        .toArray();
        return restaurants.map((doc) => ({
            ...doc,
            _id: doc._id.toString(),
        }))
})

import { connectToDatabase } from '~~/server/utils/mongodb'
export default defineEventHandler(async () => {
    const { db } = await connectToDatabase();
    const collection = db.collection("restaurants");
  // Filter: Queens borough + name contains "Moon" (case-insensitive)
    const query = {
        borough: 'Queens',
        name: { $regex: 'Moon', $options: 'i' },
    }
    const restaurants = await collection
        .find(query)
        .project({ name: 1, borough: 1, cuisine: 1, grades: 1 })
        .toArray()
    return restaurants.map((doc) => ({
        ...doc,
        _id: doc._id.toString(),
    }))
})

@tailwind base;
@tailwind components;
@tailwind utilities;

<script setup lang="ts">
import { computed } from 'vue'
import { MapPin, Utensils, ChevronRight } from 'lucide-vue-next'
// Type definitions
interface Grade {
  grade?: string
  score?: number
}
interface Restaurant {
  _id: string
  name: string
  borough?: string
  cuisine?: string
  grades?: Grade[]
}
// Determine endpoint based on current route
const route = useRoute()
const isBrowse = computed(() => route.path === '/browse')
const endpoint = computed(() => 
  isBrowse.value ? '/api/restaurants/browse' : '/api/restaurants'
)
// Fetch data using Nuxt's useFetch composable
// Automatically refetches when endpoint changes
const { data: restaurants } = await useFetch<Restaurant[]>(endpoint, {
  watch: [endpoint],
  default: () => [],
})
// Dynamic page content
const pageTitle = computed(() =>
  isBrowse.value ? 'Hidden Gems in Queens' : 'All Restaurants'
)
const pageSubtitle = computed(() =>
  isBrowse.value
    ? "Filtered by: Borough 'Queens' & Name contains 'Moon'"
    : 'Explore our complete directory of local favorites'
)
// Deterministic gradient based on name length
const getGradient = (name: string) => {
  const gradients = [
    'from-orange-400 to-pink-500',
    'from-blue-400 to-indigo-500',
    'from-green-400 to-emerald-500',
    'from-purple-400 to-fuchsia-500',
  ]
  return gradients[name.length % gradients.length]
}
</script>
<template>
  <div class="max-w-6xl mx-auto px-4 py-8">
    <!-- Header -->
    <div class="mb-8">
      <h3 class="text-3xl font-bold text-gray-800">
        {{ pageTitle }}
      </h3>
      <p class="text-gray-500 mt-2">
        {{ pageSubtitle }}
      </p>
    </div>
    <!-- Restaurant Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div
        v-for="restaurant in restaurants"
        :key="restaurant._id"
        class="group bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden flex flex-col"
      >
        <!-- Gradient Header -->
        <div
          :class="[
            'h-32 bg-gradient-to-br p-6 flex items-end relative',
            getGradient(restaurant.name)
          ]"
        >
          <span class="absolute top-4 right-4 bg-white/20 backdrop-blur-md text-white text-xs font-bold px-2 py-1 rounded-full border border-white/30">
            Grade {{ restaurant.grades?.[0]?.grade ?? 'N/A' }}
          </span>
          <h3 class="text-white text-xl font-bold drop-shadow-md line-clamp-2">
            {{ restaurant.name }}
          </h3>
        </div>
        <!-- Card Body -->
        <div class="p-5 flex-1 flex flex-col">
          <div class="flex items-center justify-between mb-4">
            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium bg-green-50 text-green-700 border border-green-100">
              <Utensils class="w-3 h-3" />
              {{ restaurant.cuisine ?? 'Unknown' }}
            </span>
            <div class="flex items-center text-gray-400 text-xs font-medium">
              <MapPin class="w-3 h-3 mr-1" />
              {{ restaurant.borough ?? 'Unknown' }}
            </div>
          </div>
          <div class="mt-auto pt-4 border-t border-gray-50 flex items-center justify-between text-sm">
            <span class="text-gray-400">
              Score: {{ restaurant.grades?.[0]?.score ?? 0 }}
            </span>
            <button class="text-indigo-600 font-semibold group-hover:underline flex items-center gap-1">
              View Menu <ChevronRight class="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- Empty State -->
    <div v-if="restaurants?.length === 0" class="text-center py-12 text-gray-500">
      <p>No restaurants found.</p>
      <p class="text-sm mt-2">Check your MongoDB connection and ensure the sample_restaurants database is loaded.</p>
    </div>
  </div>
</template>

<template>
  <nav class="flex justify-between items-center mb-6 bg-white shadow-md px-6 py-4 rounded-lg">
    <NuxtLink to="/">
      <img
        alt="MongoDB logo"
        class="h-10"
        src="https://d3cy9zhslanhfa.cloudfront.net/media/3800C044-6298-4575-A05D5C6B7623EE37/4B45D0EC-3482-4759-82DA37D8EA07D229/webimage-8A27671A-8A53-45DC-89D7BF8537F15A0D.png"
      />
    </NuxtLink>
    
    <div class="flex gap-4">
      <NuxtLink 
        to="/" 
        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors"
        :class="$route.path === '/' 
          ? 'bg-indigo-100 text-indigo-700' 
          : 'text-gray-600 hover:bg-gray-100'"
      >
        All Restaurants
      </NuxtLink>
      <NuxtLink 
        to="/browse" 
        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors"
        :class="$route.path === '/browse' 
          ? 'bg-indigo-100 text-indigo-700' 
          : 'text-gray-600 hover:bg-gray-100'"
      >
        Browse Filtered
      </NuxtLink>
    </div>
  </nav>
</template>

<template>
  <RestaurantList />
</template>

<template>
  <RestaurantList />
</template>

<template>
  <div class="w-full p-6 min-h-screen bg-gray-50">
    <Navbar />
    <NuxtPage />
  </div>
</template>