第十七章：Vue 和 Nuxt 的边界 —— 一条街 vs 整个商业综合体

1 分钟 172 字第 87 / 962 个阅读单元

只用 Vue 时，你主要在搭一条商业街。

当你还要同时处理这些问题时，就进入 Nuxt 的地盘了：

SSR
SSG
混合渲染
目录路由
服务端 API
服务端数据获取
通用部署

截至 2026-03-28，Nuxt 官方文档主线已经是 4.x。

// server/api/shops.get.ts
export default defineEventHandler(() => {
  return [
    { id: 1, name: 'Vue 书店' },
    { id: 2, name: 'Nuxt 茶馆' },
  ];
});

vue

<!-- app/pages/shops.vue -->
<script setup lang="ts">
const { data } = await useFetch('/api/shops');
</script>

<template>
  <ul>
    <li v-for="shop in data ?? []" :key="shop.id">
      {{ shop.name }}
    </li>
  </ul>
</template>

可以这样理解：

Vue：负责把一条街盖好
Nuxt：负责把整座商业区开起来，还带运营系统和后勤系统