Merge pull request #804 from Lemoncode/vue-2025

Slides Vue I

Author: gangsthub

04-frameworks/03-vue/slides/nuxt.md

@@ -0,0 +1,132 @@
+---
+layout: section
+---
+
+# <logos-nuxt-icon /> Nuxt
+
+---
+
+layout: hero-image
+image: /nuxt.png
+
+---
+
+### ¿Qué es Nuxt?
+
+Es un framework que nos facilita la creación de aplicaciones modernas de Vue.js.
+
+https://nuxt.com/
+
+---
+
+## layout: quote
+
+# <logos-nuxt-icon /> Características principales
+
+<v-clicks depth="2">
+
+- Diferentes modos de renderizado:
+  - SSR (Server Side Rendering)
+  - Generación de sitios estáticos (SSG, JAMStack)
+  - SPA (Single Page Application)
+  - Híbrido (SSR + SPA)
+  - Islas (Componentes que se renderizan en el servidor y no son interactivos)
+- File-based routes: Rutas dinámicas y anidadas
+- Vite (servidor de desarrollo y bundler)
+  - Code-splitting
+  - Hot Module Reloading
+- Backend (APIs) integrado
+- TypeScript
+
+</v-clicks>
+
+---
+
+## layout: two-cols-header
+
+# <logos-nuxt-icon /> Configuración de carpetas
+
+::left::
+
+Al crear un proyecto con Nuxt, se crean los siguientes archivos:
+
+![Nuxt folders](/nuxt-inicio.png)
+
+::right::
+
+<v-clicks>
+
+- Pero terminaremos con algo así:
+
+![Nuxt folders](/nuxt-completo.png)
+
+</v-clicks>
+
+---
+
+## layout: two-cols-header
+
+# <logos-nuxt-icon /> Bootstrapping
+
+::left::
+
+```bash
+pnpm dlx nuxi@latest init <project-name>
+```
+
+```bash
+❯ Which package manager would you like to use
+  pnpm
+❯ Initialize git repository?
+  Yes
+```
+
+---
+
+layout: section
+class: text-center
+
+---
+
+# A los teclados!
+
+<!-- image centered -->
+<div class="text-center">
+  <img src="/lemonade.gif" class="m-auto object-contain max-h-sm" />
+</div>
+
+---
+
+layout: custom-cover
+background: vue-sticker.jpg
+
+---
+
+# <logos-vue /> Vue - II
+
+## 🌈 Vuenas tardes! 🌈
+
+---
+
+## layout: quote
+
+# Agenda
+
+- Continuamos con el código
+
+  - Estilos
+  - Chat
+  - OpenAI
+
+- Composition API
+- Refactor con Composables
+
+---
+
+layout: hero-image
+image: /teclado.gif
+class: text-center
+
+---
+
+# Vuelta a los teclados!