{"id":3477,"date":"2022-05-25T06:21:40","date_gmt":"2022-05-25T06:21:40","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/"},"modified":"2026-04-28T14:07:07","modified_gmt":"2026-04-28T14:07:07","slug":"nuxt-3-un-popular-framework-vue-hibrido","status":"publish","type":"post","link":"https:\/\/thecodest.co\/es\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/","title":{"rendered":"Nuxt 3: un popular marco h\u00edbrido Vue"},"content":{"rendered":"<p><strong>Nuxt 3<\/strong> se ha redise\u00f1ado y reescrito para que admita ESM y <a href=\"https:\/\/thecodest.co\/es\/dictionary\/typescript-developer\/\">TypeScript<\/a> de forma nativa. Actualmente es inestable, por lo que a\u00fan no est\u00e1 listo para la producci\u00f3n. El lanzamiento del primer candidato (nuxt@3.0.0-rc.1) est\u00e1 previsto para el 7 de abril de 2022.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/zrzut-ekranu-2022-05-25-o-08.26.43.png\" alt=\"Siguiente tabla \" title=\"Tabla comparativa Nuxt \"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.google.com\/url?q=https:\/\/v3.nuxtjs.org\/getting-started\/introduction\/%23comparison&amp;sa=D&amp;source=docs&amp;ust=1653463586111556&amp;usg=AOvVaw0WL5Cg-cEL0X_q8Kiu_fGy\" rel=\"nofollow\">fuente<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Iniciar un nuevo proyecto<\/h2>\n\n\n\n<p>Abrir un terminal o abrir un terminal integrado desde Visual Studio <a href=\"https:\/\/thecodest.co\/es\/dictionary\/what-is-code-refactoring\/\">C\u00f3digo<\/a> y utiliza el siguiente comando para crear un nuevo starter <a href=\"https:\/\/thecodest.co\/es\/dictionary\/why-do-projects-fail\/\">proyecto<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>npx nuxi init nuxt3-app<\/code><\/code><\/pre>\n\n\n\n<p>Abre la carpeta nuxt3-app:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code>cd nuxt3-app<\/code><\/code><\/code><\/pre>\n\n\n\n<p>Instale las dependencias:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">instalaci\u00f3n de yarn<\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<p>Ejecute el servidor de desarrollo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">yarn dev<\/code><\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<p>Construye la aplicaci\u00f3n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">construcci\u00f3n de hilo<\/code><\/code><\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<p>Ejecute la aplicaci\u00f3n creada:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code><code><code><code>Inicio del hilo<\/code><\/code><\/code><\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 hay de nuevo?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Vue 3 soporte<\/h3>\n\n\n\n<p><strong><a href=\"https:\/\/thecodest.co\/es\/blog\/hire-vue-js-developers\/\">Vue<\/a> 3<\/strong> incorpora varias novedades que agilizan y facilitan la creaci\u00f3n y el mantenimiento de aplicaciones. Los cambios m\u00e1s importantes se han realizado en Global Vue <a href=\"https:\/\/thecodest.co\/es\/blog\/compare-staff-augmentation-firms-that-excel-in-api-team-staffing-for-financial-technology-projects\/\">API<\/a> y la API de eventos. <strong>Vue 3<\/strong>tambi\u00e9n introduce nuevas funciones como proporcionar \/ inyectar, la API de composici\u00f3n (que se describe m\u00e1s adelante), Fragmentos, y Teleport.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/thecodest.co\/services\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/blog.webp\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Composici\u00f3n API<\/h3>\n\n\n\n<p>La API de composici\u00f3n es una funci\u00f3n integrada en Vue 3 que proporciona un conjunto de APIs que permiten utilizar funciones importadas en lugar de declarar opciones. As\u00ed pues, las principales ventajas de la API de composici\u00f3n son una mejor reutilizaci\u00f3n de la l\u00f3gica, una organizaci\u00f3n m\u00e1s flexible del c\u00f3digo y una gran integraci\u00f3n TypeScript. Todas las partes de la nueva API pueden utilizarse fuera de <strong>Vue<\/strong> componentes.<\/p>\n\n\n\n<p><strong>Nuxt 3<\/strong> proporciona un nuevo directorio - <code>componibles\/<\/code> - que permite auto-importar Vue composables intro application.<\/p>\n\n\n\n<p>Ejemplo componible:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code><code><code><code><code>\/\/ Estar\u00e1 disponible como useFoo() (camelCase del nombre del archivo sin extensi\u00f3n)\n export default function () {\n   return useState('foo', () =&gt; 'bar')<code>\/\/ Estar\u00e1 disponible como useFoo() (camelCase del nombre de archivo sin extensi\u00f3n)\n export default function () {\n   return useState('foo', () =&gt; 'bar')\n }<\/code>\n }<\/code><\/code><\/code><\/code><\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<p>Ejemplo de utilizaci\u00f3n de un componible en un <strong>Vue<\/strong> componente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;div&gt;{{ foo }}&lt;\/div&gt;\n&lt;\/&gt;<\/code><\/pre>\n\n\n\n<p>Como puedes ver arriba, un composable se exporta como useFoo, tal y como se declara en el nombre const. Si no hay nombre de exportaci\u00f3n, el composable ser\u00e1 accesible como pascelCase del nombre del archivo. Tambi\u00e9n permite integrar f\u00e1cilmente los composables auto-importados con un popular composable de Vue Store llamado <a href=\"https:\/\/www.google.com\/url?q=https:\/\/pinia.vuejs.org\/&amp;sa=D&amp;source=docs&amp;ust=1653463671582173&amp;usg=AOvVaw1YVpJI3sNMeufnYVxcM43i\" rel=\"nofollow\">Pina<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/api.png\" alt=\"Ejemplo de estructura de API \" title=\"API de opciones y composici\u00f3n \"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/vuejs.org\/guide\/extras\/composition-api-faq.html#better-logic-reuse\" rel=\"nofollow\">fuente<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Motor Nitro<\/h3>\n\n\n\n<p>Nitro es un servidor full-stack que utiliza Rollup y <a href=\"https:\/\/thecodest.co\/es\/blog\/find-your-node-js-expert-for-hire-today\/\">Node.js<\/a> trabajadores en desarrollo para servir c\u00f3digo y aislamiento de contexto. Tambi\u00e9n incluye una API de servidor y middleware de servidor. En producci\u00f3n, el motor construye la aplicaci\u00f3n y el servidor en un \u00fanico directorio: `.output`. La cuesti\u00f3n es que output es ligero: minificado y sin ning\u00fan tipo de <a href=\"https:\/\/thecodest.co\/es\/dictionary\/what-is-node-js-used-for\/\">nodo<\/a> m\u00f3dulos. Nitro le permite desplegar el resultado en Node.js, Serverless, Workers, Edge-side rendering o como puramente est\u00e1tico.&nbsp;<\/p>\n\n\n\n<p><strong>Nuxt 3<\/strong> ofrece la posibilidad de desplegar en <a href=\"https:\/\/thecodest.co\/es\/dictionary\/azure-developer\/\">Azure<\/a> o Netlify sin necesidad de configuraci\u00f3n, junto con un despliegue de Firebase o Cloudflare con una configuraci\u00f3n m\u00ednima.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Vite<\/h3>\n\n\n\n<p>Vite es una herramienta de frontend de nueva generaci\u00f3n, integrada en <strong> Nuxt 3<\/strong>. Esta herramienta proporciona una experiencia de desarrollo m\u00e1s r\u00e1pida para <a href=\"https:\/\/thecodest.co\/es\/blog\/find-your-ideal-stack-for-web-development\/\">web<\/a> proyectos. Para el desarrollo, el servidor Vite cuenta con numerosas mejoras sobre los m\u00f3dulos ES nativos y un sistema muy r\u00e1pido de sustituci\u00f3n en caliente de m\u00f3dulos (HMR).<\/p>\n\n\n\n<p>En el proceso de construcci\u00f3n, Vite agrupa el c\u00f3digo con Rollup preconfigurado para optimizar los activos est\u00e1ticos para la producci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Nueva estructura de archivos<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/zrzut-ekranu-2022-05-25-o-08.52.47.png\" alt=\"ejemplo de estructura de archivos \" title=\"estructura del directorio \"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/v3.nuxtjs.org\/docs\" rel=\"nofollow\">fuente<\/a><\/p>\n\n\n\n<p><strong>Nuxt 3<\/strong> introduce una estructura de archivos ligeramente modificada. Los mayores cambios se hicieron a `app.vue` - directorio `pages\/` es opcional y si no est\u00e1 presente, la aplicaci\u00f3n no incluir\u00e1 un vue-router, que es \u00fatil cuando se crea una p\u00e1gina de carga o una aplicaci\u00f3n que no necesita enrutamiento.&nbsp;<\/p>\n\n\n\n<p>Ejemplo de archivo app.vue:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">Hola a todos.<\/code><\/pre>\n\n\n\n<p>Para incluir el enrutamiento, las p\u00e1ginas y el dise\u00f1o, es necesario utilizar componentes incorporados, a saber, `NuxtPage` y `NuxtLayout`. Ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;div&gt;\n&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;\/p&gt;\n&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;\/p&gt;\n&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>`app.vue` es el componente principal de la aplicaci\u00f3n <strong>Aplicaci\u00f3n Nuxt<\/strong>por lo que todo lo que se a\u00f1ada all\u00ed ser\u00e1 global y se incluir\u00e1 en todas las p\u00e1ginas.&nbsp;<\/p>\n\n\n\n<p>El cambio en el <strong>Nux<\/strong>t implica sustituir el directorio `store\/` por `composables\/`, ya que <strong>Vue 3<\/strong>introduce los componibles, que sustituyen a los almacenes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Migraci\u00f3n de Vue 2 a Vue 3 mediante Nuxt Bridge<\/h2>\n\n\n\n<p>Nuxt 3 introduce Nuxt Bridge, una capa de compatibilidad avanzada que actualiza las aplicaciones Nuxt 2 con las funciones de Nuxt 3, permitiendo que se actualice pieza a pieza. Proporciona acceso a caracter\u00edsticas como: Motor Nitro, API de composici\u00f3n y nueva CLI, simplemente instalando y activando el puente.<\/p>\n\n\n\n<p>Nuxt Bridge es compatible con versiones anteriores, por lo que los plugins y m\u00f3dulos heredados seguir\u00e1n funcionando, mientras que la migraci\u00f3n es f\u00e1cil y posible sin reescribir toda la aplicaci\u00f3n.<\/p>\n\n\n\n<p>Para habilitar Nuxt Bridge, tienes que asegurarte de que el servidor de desarrollo no se est\u00e1 ejecutando, luego eliminar cualquier archivo de bloqueo de paquetes e instalar `nuxt-edge`:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">- \"nuxt\": \"^2.15.0\"\n\n\"nuxt-edge\" \"latest\"<\/code><\/pre>\n\n\n\n<p>A continuaci\u00f3n, vuelva a instalar todas las dependencias:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">instalar hilo<\/code><\/pre>\n\n\n\n<p>Su migraci\u00f3n con Nuxt Bridge est\u00e1 terminada.<\/p>\n\n\n\n<p>Otra forma es instalar <strong>Nuxt<\/strong> Bridge como dependencia de desarrollo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">yarn add --dev @nuxt\/bridge@npm:@nuxt\/bridge-edge<\/code><\/pre>\n\n\n\n<p>Entonces tendr\u00e1 que actualizar los scripts en `package.json` para tener en cuenta los cambios que el servidor Nitro aporta al proceso de construcci\u00f3n.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/thecodest.co\/contact\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/interested_in_cooperation_.png\" alt=\"bandera de cooperaci\u00f3n\"\/><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>Nuxt 3 es la pr\u00f3xima generaci\u00f3n del popular framework h\u00edbrido Vue, que nos permite utilizar Vue para construir aplicaciones renderizadas del lado del servidor. La versi\u00f3n beta fue lanzada el 12 de octubre de 2021, trayendo en Nuxt Vue 3, un nuevo motor de introducci\u00f3n, un paquete m\u00e1s ligero y adhook Vite.<\/p>","protected":false},"author":2,"featured_media":3478,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Nuxt 3 - a Popular Hybrid Vue Framework - The Codest<\/title>\n<meta name=\"description\" content=\"Nuxt 3 is the next generation of the popular hybrid Vue framework, which allows us to use Vue for building server-side rendered applications. Beta version was launched on 12 October 2021, bringing into Nuxt Vue 3, a new intro engine, a lighter bundle and adhook Vite.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/es\/blog\/nuxt-3-un-popular-framework-vue-hibrido\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Nuxt 3 - a Popular Hybrid Vue Framework\" \/>\n<meta property=\"og:description\" content=\"Nuxt 3 is the next generation of the popular hybrid Vue framework, which allows us to use Vue for building server-side rendered applications. Beta version was launched on 12 October 2021, bringing into Nuxt Vue 3, a new intro engine, a lighter bundle and adhook Vite.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/es\/blog\/nuxt-3-un-popular-framework-vue-hibrido\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-25T06:21:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-28T14:07:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Nuxt 3 &#8211; a Popular Hybrid Vue Framework\",\"datePublished\":\"2022-05-25T06:21:40+00:00\",\"dateModified\":\"2026-04-28T14:07:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\"},\"wordCount\":700,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nuxt_3.png\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\",\"name\":\"Nuxt 3 - a Popular Hybrid Vue Framework - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nuxt_3.png\",\"datePublished\":\"2022-05-25T06:21:40+00:00\",\"dateModified\":\"2026-04-28T14:07:07+00:00\",\"description\":\"Nuxt 3 is the next generation of the popular hybrid Vue framework, which allows us to use Vue for building server-side rendered applications. Beta version was launched on 12 October 2021, bringing into Nuxt Vue 3, a new intro engine, a lighter bundle and adhook Vite.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nuxt_3.png\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nuxt_3.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Nuxt 3 &#8211; a Popular Hybrid Vue Framework\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/es\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Nuxt 3 - un popular marco h\u00edbrido Vue - The Codest","description":"Nuxt 3 es la pr\u00f3xima generaci\u00f3n del popular framework h\u00edbrido Vue, que nos permite utilizar Vue para construir aplicaciones renderizadas del lado del servidor. La versi\u00f3n beta fue lanzada el 12 de octubre de 2021, trayendo en Nuxt Vue 3, un nuevo motor de introducci\u00f3n, un paquete m\u00e1s ligero y adhook Vite.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/es\/blog\/nuxt-3-un-popular-framework-vue-hibrido\/","og_locale":"es_ES","og_type":"article","og_title":"Nuxt 3 - a Popular Hybrid Vue Framework","og_description":"Nuxt 3 is the next generation of the popular hybrid Vue framework, which allows us to use Vue for building server-side rendered applications. Beta version was launched on 12 October 2021, bringing into Nuxt Vue 3, a new intro engine, a lighter bundle and adhook Vite.","og_url":"https:\/\/thecodest.co\/es\/blog\/nuxt-3-un-popular-framework-vue-hibrido\/","og_site_name":"The Codest","article_published_time":"2022-05-25T06:21:40+00:00","article_modified_time":"2026-04-28T14:07:07+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png","type":"image\/png"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Nuxt 3 &#8211; a Popular Hybrid Vue Framework","datePublished":"2022-05-25T06:21:40+00:00","dateModified":"2026-04-28T14:07:07+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/"},"wordCount":700,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png","articleSection":["Software Development"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/","url":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/","name":"Nuxt 3 - un popular marco h\u00edbrido Vue - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png","datePublished":"2022-05-25T06:21:40+00:00","dateModified":"2026-04-28T14:07:07+00:00","description":"Nuxt 3 es la pr\u00f3xima generaci\u00f3n del popular framework h\u00edbrido Vue, que nos permite utilizar Vue para construir aplicaciones renderizadas del lado del servidor. La versi\u00f3n beta fue lanzada el 12 de octubre de 2021, trayendo en Nuxt Vue 3, un nuevo motor de introducci\u00f3n, un paquete m\u00e1s ligero y adhook Vite.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Nuxt 3 &#8211; a Popular Hybrid Vue Framework"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"The Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/es\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/posts\/3477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/comments?post=3477"}],"version-history":[{"count":8,"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/posts\/3477\/revisions"}],"predecessor-version":[{"id":8376,"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/posts\/3477\/revisions\/8376"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/media\/3478"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/media?parent=3477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/categories?post=3477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/tags?post=3477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}