🧰 Nuxt.js · Estudio ← Índice Qué es Características Casos de uso Script Casos reales Referencia

Estudio de Nuxt.js

UI / SSR ⭐ 46k stars
Framework Vue con renderizado en servidor (SSR/SSG), convención sobre configuración.

🤖 Skill de implementación: frontend-desarrollo (regla: solo catálogo de las 66 · versiones por ERR/MEJ)

1 · Características

2 · Casos de uso

3 · Script minimalista

Instalación: npx nuxi@latest init

// app/pages/index.vue
<template><h1>Hola Nuxt</h1></template>

4 · Casos de uso (implementación real)

Dos casos de uso comunes implementados con esta librería.

1. Página con useFetch

Trae datos del servidor (SSR).

// pages/index.vue
<script setup>
const { data } = await useFetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
</script>

<template><li v-for="p in data" :key="p.id">{{ p.title }}</li></template>
🔁 Cómo funciona: `useFetch` se ejecuta en el servidor y entrega la página ya con datos (SSR).

2. Layout compartido

Layout con navbar aplicado a varias páginas.

// layouts/default.vue
<template>
  <div>
    <nav>Inicio · Blog</nav>
    <slot />   <!-- aquí se renderiza la página -->
  </div>
</template>
🔁 Cómo funciona: Los layouts envuelven las páginas; `<slot/>` es donde Nuxt inserta el contenido.

5 · Referencia

CategoríaUI / SSR
Stars (GitHub)⭐ 46k
Sitio oficialhttps://nuxt.com/
GitHubhttps://github.com/nuxt/nuxt
Instalaciónnpx nuxi@latest init
RelacionadasNext.js · Gatsby.js · Gridsome
📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de descargar. Volver al índice de los 66 estudios.