MongoDBと Nux および Vue との統合

npm create nuxt@latest

npm install mongodb lucide-vue-nextnpm install -D @types/node @nuxtjs/tailwindcss

touch .env

MONGODB_URI=<Your Connection URI>

// https://nuxt.com/docs/api/configuration/nuxt-configexport 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'],})

mkdir -p server/utilstouch server/utils/mongodb.ts

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 };}

mkdir -p server/api/restaurantstouch server/api/restaurants/index.get.ts

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(),        }))})

touch server/api/restaurants/browse.get.ts

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(),    }))})

mkdir -p app/assets/csstouch app/assets/css/main.css

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

mkdir -p app/componentstouch app/components/RestaurantList.vue

<script setup lang="ts">import { computed } from 'vue'import { MapPin, Utensils, ChevronRight } from 'lucide-vue-next'
// Type definitionsinterface Grade {  grade?: string  score?: number}
interface Restaurant {  _id: string  name: string  borough?: string  cuisine?: string  grades?: Grade[]}
// Determine endpoint based on current routeconst 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 changesconst { data: restaurants } = await useFetch<Restaurant[]>(endpoint, {  watch: [endpoint],  default: () => [],})
// Dynamic page contentconst 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 lengthconst 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>

touch app/components/Navbar.vue

<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>

mkdir -p app/pagestouch app/pages/index.vue

<template>  <RestaurantList /></template>

touch app/pages/browse.vue

<template>  <RestaurantList /></template>

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

your-project-directory/├── .env <-- Environment variable file├── app/│   ├── app.vue <-- Main application component│   ├── assets/│   │   └── css/│   │       └── main.css <-- Tailwind config│   ├── components/│   │   ├── Navbar.vue <-- All restaurants and filtered restaurants links│   │   └── RestaurantList.vue <-- Container for restaurant data│   └── pages/│       ├── browse.vue <-- Filtered restaurants page│       └── index.vue <-- All restaurants page├── server/│   ├── api/│   │   └── restaurants/│   │       ├── browse.get.ts <-- Filtered restaurants route│   │       └── index.get.ts <-- All restaurants route│   └── utils/│       └── mongodb.ts <-- MongoDB connection utility├── nuxt.config.ts <-- Nuxt configuration file└── package.json

npm run dev

Nuxt 4.2.2 (with Nitro 2.13.1, Vite 7.3.1 and Vue 3.5.27)
Local:    http://localhost:3000/Network:  use --host to expose
Using default Tailwind CSS fileDevTools: press Shift + Option + D in the browser (v3.1.1)
Vite client built in 22msVite server built in 19msNuxt Nitro server built in 247msVite server warmed up in 0msVite client warmed up in 1msConnected to MongoDB Atlas