docs: add server-routes example (#4301)

docs/content/4.examples/5.server/routes.md

@@ -0,0 +1,12 @@
+---
+template: Example
+---
+
+# Server Routes
+
+This example shows how to create server routes inside a `server/api` directory.
+
+::ReadMore{link="/guide/features/server-routes"}
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/server/routes" file="app.vue"}

examples/server/routes/app.vue

@@ -0,0 +1,9 @@
+<template>
+  <NuxtExampleLayout example="server/routes">
+    <p>Fetched from <pre>/api/mountain</pre>: {{ mountain }}</p>
+  </NuxtExampleLayout>
+</template>
+
+<script setup>
+const { data: mountain } = await useFetch('/api/mountain')
+</script>

examples/server/routes/nuxt.config.ts

@@ -0,0 +1,7 @@
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
+})

examples/server/routes/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "example-server-routes",
+  "private": true,
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
+  }
+}

examples/server/routes/server/api/mountain.js

@@ -0,0 +1,17 @@
+export default defineEventHandler(() => {
+  return {
+    title: 'Mount Everest',
+    description: "Mount Everest is Earth's highest mountain above sea level, located in the Mahalangur Himal sub-range of the Himalayas. The China–Nepal border runs across its summit point",
+    height: '8,848 m',
+    countries: [
+      'China',
+      'Nepal'
+    ],
+    continent: 'Asia',
+    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Everest_kalapatthar.jpg/600px-Everest_kalapatthar.jpg',
+    dir: '/mountains',
+    path: '/mountains/mount-everest',
+    slug: 'mount-everest',
+    updatedAt: '2020-12-11T15:40:35.000Z'
+  }
+})

examples/server/routes/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

yarn.lock

@@ -6514,6 +6514,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"example-server-routes@workspace:examples/server/routes":
+  version: 0.0.0-use.local
+  resolution: "example-server-routes@workspace:examples/server/routes"
+  dependencies:
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
+    nuxt3: latest
+  languageName: unknown
+  linkType: soft
+
 "example-teleport@workspace:examples/app/teleport":
   version: 0.0.0-use.local
   resolution: "example-teleport@workspace:examples/app/teleport"