Publicado · en mejora
Framework · Desde 2014
Vue.js es un framework progresivo de JavaScript para crear interfaces con componentes declarativos; Nuxt añade rutas, renderizado en servidor y APIs.
Vue.js es un framework de JavaScript de código abierto para construir interfaces de usuario, creado por Evan You y publicado por primera vez en 2014. Combina plantillas basadas en HTML con estado reactivo, de modo que la página se actualiza sola cuando cambian los datos, y su unidad básica es el componente de un solo archivo (.vue), que reúne plantilla, script y estilos. Nuxt es un framework full stack construido sobre Vue que incorpora enrutamiento basado en archivos, importaciones automáticas, renderizado en el servidor y APIs de servidor impulsadas por el motor Nitro.
Vue se puede adoptar de forma gradual: desde una sola etiqueta script que añade interactividad a parte de una página existente hasta una aplicación de una sola página completa construida con Vite. Encaja especialmente bien en pantallas muy interactivas, como paneles de administración, dashboards y herramientas internas. Cuando importan la visibilidad en buscadores y la velocidad de la primera carga, o cuando se quieren páginas y APIs en un mismo proyecto, Nuxt ofrece renderizado en servidor, generación estática y rutas de servidor, y se despliega en servidores Node.js, hosting estático y muchos otros destinos.
Para empezar, instala Node.js y sigue el tutorial interactivo y la guía del sitio oficial para aprender reactividad, componentes y sintaxis de plantillas. Después crea un proyecto basado en Vite con npm create vue@latest y construye pantallas reales; cuando necesites convenciones de rutas y renderizado en servidor, pasa a Nuxt. Pinia para la gestión de estado y Vitest para las pruebas unitarias son los complementos recomendados oficialmente.
El estado declarado con ref, reactive y computed rastrea sus dependencias, así que solo se vuelve a renderizar la parte de la página que usa cada valor.
Plantilla, script y estilos conviven en un archivo .vue, con estilos de ámbito limitado y soporte de TypeScript desde el principio.
La lógica relacionada se agrupa en funciones y se reutiliza como composables, lo que mantiene ordenados incluso los componentes grandes.
Enrutamiento por archivos, importaciones automáticas, renderizado en servidor, generación estática y rutas de API en la carpeta server funcionan sin configuración extra.
Las herramientas de Vue y Nuxt se ejecutan sobre Node.js. Instala la versión LTS desde nodejs.org y comprueba que node y npm muestran su versión.
node --version && npm --versionLa herramienta oficial create-vue pregunta si quieres añadir TypeScript, Vue Router, Pinia, Vitest y más. En la carpeta nueva ejecuta npm install y luego npm run dev para iniciar el servidor de desarrollo de Vite.
npm create vue@latestPara usar Nuxt, genera un proyecto con nuxi. Entra en la carpeta nueva y ejecuta npm run dev; el servidor de desarrollo escucha por defecto en http://localhost:3000.
npx nuxi@latest init my-nuxt-appsrc/App.vue es el componente raíz de un proyecto create-vue. El bloque script setup crea un contador reactivo count con ref(0); la plantilla lo muestra con dobles llaves y lo incrementa en cada clic mediante @click. Cuando count cambia, Vue vuelve a renderizar solo lo que depende de él. Con npm run dev en marcha, cada cambio guardado aparece al instante en el navegador.
src/App.vue
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>
<template>
<h1>Hello, Vue!</h1>
<button @click="count++">Clicked {{ count }} times</button>
</template>
npm create vue@latest hello-vue && cd hello-vue && npm install && npm run devSeis capítulos que te llevan desde la instalación hasta las ideas clave de Vue.js · Nuxt.
Haz preguntas, comparte tu experiencia e intercambia opiniones sobre Vue.js · Nuxt.
Todavía no hay debates. Empieza el primero.
0 comentarios
Iniciar sesión · Inicia sesión para dejar un comentario.
Sé el primero en comentar.