{"id":53352,"date":"2022-06-16T13:37:51","date_gmt":"2022-06-16T11:37:51","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=53352&#038;post_type=knowledgebase&#038;preview_id=53352"},"modified":"2025-10-01T21:32:28","modified_gmt":"2025-10-01T19:32:28","slug":"nuxt-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/","title":{"rendered":"\u00bfQu\u00e9 es Nuxt.js? M\u00e1s informaci\u00f3n sobre el Intuitivo Framework Vue"},"content":{"rendered":"<p>Nuxt.js es el <a href=\"https:\/\/kinsta.com\/es\/blog\/vue-js\/\">framework Vue<\/a> m\u00e1s intuitivo disponible en la actualidad. Combina la potencia de Vue.js con las caracter\u00edsticas de renderizado del lado del servidor para hacerlo m\u00e1s potente. Puedes construir una aplicaci\u00f3n completa de renderizado del lado del cliente de Vue.js, una aplicaci\u00f3n completa generada est\u00e1ticamente y una aplicaci\u00f3n monol\u00edtica.<\/p>\n<p>Nuxt.js resuelve el problema de la estructuraci\u00f3n de tu proyecto Vue.js, ya que viene con una arquitectura de desarrollo frontend preparada para la empresa. Las caracter\u00edsticas de Nuxt.js ya est\u00e1n estructuradas utilizando los est\u00e1ndares de la industria para crear aplicaciones empresariales.<\/p>\n<p>Esta gu\u00eda explorar\u00e1 Nuxt.js, lo que puedes construir con \u00e9l y c\u00f3mo funciona desde dentro.<\/p>\n<p><div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><br \/>\n<\/p>\n<h2>\u00bfQu\u00e9 es Nuxt.js?<\/h2>\n<p>Nuxt.js es un framework de renderizado del lado del servidor construido sobre Vue.js. Abstrae la mayor parte de la compleja configuraci\u00f3n que implica la gesti\u00f3n de datos as\u00edncronos, el middleware y el enrutamiento. Tambi\u00e9n ayuda a estructurar las aplicaciones <a href=\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/\">Vue.js<\/a> utilizando la arquitectura-est\u00e1ndar del sector para crear aplicaciones Vue.js sencillas o empresariales.<\/p>\n<figure id=\"attachment_123662\" aria-describedby=\"caption-attachment-123662\" style=\"width: 1144px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123662 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/nuxt-js-logo.jpeg\" alt=\"Una captura de pantalla que muestra el logotipo oficial de Nuxt.js.\" width=\"1144\" height=\"758\"><figcaption id=\"caption-attachment-123662\" class=\"wp-caption-text\">Logotipo oficial de Nuxt.js. (Fuente de la imagen: <a href=\"https:\/\/medium.com\/ucars-tech\/so-we-migrated-our-entire-front-end-to-nuxt-js-fec14247d3a5\">Medium<\/a>)<\/figcaption><\/figure>\n<h2>\u00bfPara Qu\u00e9 Sirve Nuxt.js?<\/h2>\n<p>Nuxt.js te permite crear muchos tipos de aplicaciones diferentes. A continuaci\u00f3n se muestran las tres aplicaciones m\u00e1s populares hechas con Nuxt.js.<\/p>\n<h3>P\u00e1ginas Generadas Est\u00e1ticamente<\/h3>\n<p>Este tipo de sitio web no requiere ninguna fuente de contenido externa: el contenido ya est\u00e1 incrustado en el HTML. Ejemplos de este tipo de sitios web son los sitios web de <a href=\"https:\/\/kinsta.com\/es\/blog\/portafolio-online\/\">portfolio<\/a>, de demostraci\u00f3n y de tutoriales.<\/p>\n<h3>Aplicaciones de una Sola p\u00e1gina (SPA)<\/h3>\n<p>Este enfoque de desarrollo del frontend obtiene el contenido din\u00e1mico de una API externa y lo muestra en el lado del cliente. La mayor\u00eda de los <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-javascript\/\">frameworks de JavaScript<\/a>, como Vue.js, React.js, Angular y Ember.js, son frameworks de aplicaciones de una sola p\u00e1gina.<\/p>\n<p>Adem\u00e1s, el sistema de enrutamiento de una SPA se consigue con la API <a href=\"https:\/\/kinsta.com\/es\/blog\/html-vs-html5\/\">HTML 5<\/a> History o el hash de localizaci\u00f3n para el enrutamiento, lo que ofrece a los desarrolladores la posibilidad de modificar la URL de un sitio web sin necesidad de actualizar toda la p\u00e1gina.<\/p>\n<h3>Aplicaciones Universales<\/h3>\n<p>\u00abAplicaci\u00f3n universal\u00bb es un t\u00e9rmino que describe el uso de un enfoque de renderizado del lado del servidor para obtener datos del lado del cliente en el servidor antes de renderizar completamente la p\u00e1gina en el navegador del cliente.<\/p>\n<p>El renderizado del lado del servidor (SSR) es un problema conocido en Vue.js porque implica tediosas configuraciones para hacerlo bien.<\/p>\n<p>Nuxt.js resuelve el problema del SSR en Vue.js, lo que es \u00fatil para la <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-seo\/\">optimizaci\u00f3n de los motores de b\u00fasqueda (SEO)<\/a>. Nuxt.js puede incluso ampliar las aplicaciones universales para dar cabida a una aplicaci\u00f3n monol\u00edtica completa, en la que el frontend y el backend comparten una \u00fanica base de c\u00f3digo.<\/p>\n<h2>\u00bfC\u00f3mo Funciona Nuxt.js?<\/h2>\n<p>Nuxt.js funciona de la misma manera que un framework del lado del servidor cuando un usuario visita un sitio web. Si la renderizaci\u00f3n del lado del servidor est\u00e1 activada, las peticiones se renderizan en el servidor cada vez que el usuario solicita una p\u00e1gina, por lo que se necesita un servidor para poder servir la p\u00e1gina en cada petici\u00f3n. Adem\u00e1s, si se habilita la renderizaci\u00f3n del lado del cliente, se renderiza el contenido de la p\u00e1gina en el navegador utilizando JavaScript.<\/p>\n<p>Estas son las principales acciones y m\u00e9todos utilizados en Nuxt.js:<\/p>\n<ul>\n<li>nuxtServerInit (Acci\u00f3n): Es el primer hook del ciclo de vida que se llama en el lado del servidor si el almac\u00e9n Vuex est\u00e1 activado. Es una acci\u00f3n Vuex que se llama s\u00f3lo en el lado del servidor para pre-llenar el almac\u00e9n y, finalmente, puede utilizarse para enviar otras acciones en el almac\u00e9n Vuex.<\/li>\n<\/ul>\n<ul>\n<li>validate() (Funci\u00f3n): El m\u00e9todo validate se llama antes de renderizar los componentes de la p\u00e1gina. Es \u00fatil para validar los par\u00e1metros din\u00e1micos de un componente de p\u00e1gina.<\/li>\n<\/ul>\n<ul>\n<li>El m\u00e9todo asyncData() se utiliza para obtener datos y renderizarlos en el lado del servidor, mientras que el <a href=\"https:\/\/nuxtjs.org\/api\/pages-fetch\/\" target=\"_blank\" rel=\"noopener noreferrer\">m\u00e9todo fetch()<\/a> se utiliza para llenar el almac\u00e9n antes de renderizar la p\u00e1gina.<\/li>\n<\/ul>\n<p>Por ejemplo, cuando un sitio Nuxt.js recibe una visita a la p\u00e1gina inicial, llama a la acci\u00f3n <code>nuxtServerInit<\/code> para actualizar los estados Vuex (si est\u00e1n definidos en el almac\u00e9n Vuex). En caso contrario, si el <code>nuxtServerInit<\/code> no est\u00e1 definido, pasa a otro estado.<\/p>\n<p>A continuaci\u00f3n, busca los middlewares en este orden. Primero, comprueba en el archivo <code>nuxt.config.js<\/code> si hay alg\u00fan middleware global. Si est\u00e1 definido, lo ejecutar\u00e1 antes de buscar middleware en las p\u00e1ginas <code>layout<\/code>. Por \u00faltimo, ejecutar\u00e1 el middleware de la p\u00e1gina individual, incluidas las p\u00e1ginas hijas.<\/p>\n<p>Tras ejecutar todos los middlewares en orden, comprobar\u00e1 si la ruta es din\u00e1mica y ejecutar\u00e1 el m\u00e9todo <code>validate()<\/code> creado y validado.<\/p>\n<p>A continuaci\u00f3n, llama al m\u00e9todo <code>asyncData()<\/code> de la p\u00e1gina para obtener y representar los datos en el lado del servidor antes de llamar al m\u00e9todo <code>fetch()<\/code> para rellenar el almac\u00e9n Vuex en el lado del cliente.<\/p>\n<p>En este punto, la p\u00e1gina deber\u00eda tener todos los datos y contenidos necesarios para mostrar una p\u00e1gina web adecuada. A continuaci\u00f3n, el motor Nuxt.js renderiza la p\u00e1gina y la mostrar\u00e1 al visitante, completando el proceso.<\/p>\n<p>Este diagrama de flujo ilustra todos los pasos necesarios para renderizar una sola p\u00e1gina:<\/p>\n<figure id=\"attachment_123663\" aria-describedby=\"caption-attachment-123663\" style=\"width: 1244px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123663 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/nuxt-lifecycle.png\" alt=\"Una captura de pantalla que muestra los hooks del ciclo de vida de Nuxt.js y el proceso de inicializaci\u00f3n.\" width=\"1244\" height=\"1759\"><figcaption id=\"caption-attachment-123663\" class=\"wp-caption-text\">Una visi\u00f3n general de los ganchos del ciclo de vida de Nuxt.js. (Fuente: <a href=\"https:\/\/nuxtjs.org\/docs\/2.x\/concepts\/nuxt-lifecycle\">Sitio web de Nuxt<\/a>)<\/figcaption><\/figure>\n<p>Independientemente de la herramienta que utilices, siempre te sentir\u00e1s m\u00e1s seguro cuando entiendas c\u00f3mo funciona la herramienta de forma interna. Con la explicaci\u00f3n anterior de c\u00f3mo funciona Nuxt.js por dentro, te resultar\u00e1 f\u00e1cil de entender. Exploremos los beneficios de usar Nuxt.js para tu pr\u00f3ximo proyecto.<\/p>\n<h2>Ventajas de Nuxt.js<\/h2>\n<p>A continuaci\u00f3n, vamos a hablar de las ventajas del framework Nuxt.js y de por qu\u00e9 se ha hecho tan popular \u00faltimamente.<\/p>\n<h3>Crea Aplicaciones Universalse Sin Complicaciones<\/h3>\n<p>Nuxt.js hace que crear aplicaciones de renderizado del lado del servidor sea muy f\u00e1cil. Si alguna vez has intentado desarrollar una aplicaci\u00f3n de renderizado del lado del servidor con Vue.js, es probable que hayas saltado obst\u00e1culos dif\u00edciles debido a las innumerables opciones de configuraci\u00f3n disponibles tanto para el lado del servidor como para el lado del cliente.<\/p>\n<p>La funci\u00f3n SSR ya est\u00e1 integrada en Nuxt.js y es f\u00e1cil de usar. Permite acceder a las propiedades <code>isServer<\/code> y <code>isClient<\/code> de tus componentes para decidir si est\u00e1s renderizando algo en el lado del cliente o del servidor.<\/p>\n<p>Tambi\u00e9n proporciona el m\u00e9todo <code>asyncData<\/code> dedicado a obtener y renderizar datos en el lado del servidor de tu componente de p\u00e1gina.<\/p>\n<h3>Renderizaci\u00f3n Est\u00e1tica de Aplicaciones Vue con Beneficio Universal<\/h3>\n<p>Los sitios web generados est\u00e1ticamente est\u00e1n en auge en la industria web, y con un solo comando <code>nuxt generate<\/code>, puedes generar una versi\u00f3n est\u00e1tica de tu sitio web, con todo el HTML con las rutas correspondientes.<\/p>\n<p>El comando <code>nuxt generate<\/code> funciona exactamente igual que el enfoque de la aplicaci\u00f3n universal con todas las caracter\u00edsticas de SSR activadas, pero para un sitio web generado de forma est\u00e1tica.<\/p>\n<p>En Nuxt.js, un sitio web generado est\u00e1ticamente es como construir una potente aplicaci\u00f3n universal sin un servidor que potencie la funci\u00f3n SSR.<\/p>\n<h3>Consigue la Divisi\u00f3n Autom\u00e1tica del C\u00f3digo<\/h3>\n<p>Una de las razones por las que Nuxt.js es muy r\u00e1pido en rendimiento es por la funci\u00f3n de divisi\u00f3n de c\u00f3digo, en la que una ruta recibe un \u00fanico <a href=\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/\">archivo JavaScript<\/a> con s\u00f3lo el c\u00f3digo necesario para ejecutar esa ruta, reduciendo as\u00ed el tama\u00f1o de tu aplicaci\u00f3n.<\/p>\n<p>Esta funci\u00f3n de divisi\u00f3n de c\u00f3digo utiliza la configuraci\u00f3n de Webpack que viene incorporada al generar una versi\u00f3n est\u00e1tica de tu sitio web.<\/p>\n<h3>Recarga en Caliente<\/h3>\n<p>La recarga en caliente es una gran caracter\u00edstica a\u00f1adida para resolver el m\u00e9todo de cambio-refresco del desarrollo de software, que lleva mucho tiempo.<\/p>\n<p>Est\u00e1 configurada para auto-actualizar el servidor de desarrollo cuando cambias cualquier archivo en el directorio root.<\/p>\n<p>Cuando desarrollas y trabajas en archivos de <code>.vue<\/code>, utiliza una configuraci\u00f3n de Webpack para comprobar los cambios y compila todo por ti. Este enfoque ahorra tiempo a los desarrolladores y fomenta un desarrollo m\u00e1s r\u00e1pido de las aplicaciones.<\/p>\n<h3>Consigue la Compilaci\u00f3n de ES6\/ES7<\/h3>\n<p>Nuxt.js viene preconfigurado con Webpack y Babel para traducir y compilar las \u00faltimas versiones de JavaScript, como <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-javascript\/\">ES6 y ES7, en un JavaScript<\/a> que pueda ejecutarse en navegadores antiguos.<\/p>\n<p>Babel est\u00e1 configurado para compilar todos los archivos <code>.vue<\/code> y el c\u00f3digo ES6 dentro de las etiquetas de script en un JavaScript que funcione en todos los navegadores.<\/p>\n<p>Esta funci\u00f3n soluciona la batalla de crear manualmente aplicaciones compatibles con los navegadores y establecer la configuraci\u00f3n desde el principio.<\/p>\n<h2>C\u00f3mo Crear una Aplicaci\u00f3n Nuxt.js<\/h2>\n<p>Esta secci\u00f3n explorar\u00e1 c\u00f3mo crear una aplicaci\u00f3n Nuxt.js. Antes de entrar en materia, vamos a explorar algunos de los conceptos cr\u00edticos en el desarrollo de una aplicaci\u00f3n Nuxt.js.<\/p>\n<h3>Crear una Aplicaci\u00f3n Nuxt.js<\/h3>\n<p>Crear un nuevo proyecto es f\u00e1cil y directo. Puedes crear un proyecto con diferentes enfoques, como se indica en la documentaci\u00f3n oficial, pero el enfoque preferido y m\u00e1s recomendado es el uso de la CLI.<\/p>\n<p>Para crear una nueva aplicaci\u00f3n utilizando la CLI, aseg\u00farate de que tienes <a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">instalado npx<\/a> (npx se incluye por defecto cuando instalas yarn o npm 5.2.0).<\/p>\n<p>A continuaci\u00f3n, escribe el siguiente comando en la carpeta en la que quieras colocar tu proyecto:<\/p>\n<pre><code class=\"language-bash\">npx create-nuxt-app \ncd \nnpm run dev<\/code><\/pre>\n<p>Aseg\u00farate de sustituir el nombre del proyecto&gt; por el nombre real de tu proyecto.<\/p>\n<h3>Comprender la Estructura de Carpetas de Nuxt.js<\/h3>\n<p>Cuando est\u00e1s creando una nueva aplicaci\u00f3n utilizando cualquiera de los diferentes enfoques de instalaci\u00f3n de la documentaci\u00f3n oficial, se te presentan varios archivos y carpetas generados por la CLI. Estos archivos y carpetas son vitales y requieren que algunas de las carpetas permanezcan sin cambios y sin configuraci\u00f3n adicional.<\/p>\n<p>Veremos la estructura de carpetas, discutiremos cada archivo y carpeta, y conoceremos su importancia.<\/p>\n<figure id=\"attachment_123664\" aria-describedby=\"caption-attachment-123664\" style=\"width: 1432px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123664 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/nuxt_page.png\" alt=\"Una captura de pantalla de la estructura de carpetas de Nuxt.js que muestra los diferentes archivos generados por Nuxt.js CLI.\" width=\"1432\" height=\"884\"><figcaption id=\"caption-attachment-123664\" class=\"wp-caption-text\">Estructura de la carpeta Nuxt.js reci\u00e9n creada.<\/figcaption><\/figure>\n<h4>1. .nuxt<\/h4>\n<p>El directorio .nuxt se oculta y se genera cuando inicias tu servidor de desarrollo, y se llama <code>build directory<\/code>. El directorio contiene los archivos o artefactos generados al ejecutar el comando <code>npm run build<\/code>.<\/p>\n<p>Puedes modificar los archivos de este directorio s\u00f3lo con fines de depuraci\u00f3n, ya que los archivos se autogenerar\u00e1n de nuevo cuando ejecutes el comando <code>dev<\/code> o <code>build<\/code>.<\/p>\n<h4>2. Assets<\/h4>\n<p>La carpeta assets contiene todos tus activos no compilados, como im\u00e1genes, fuentes, archivos SASS y Stylus. Webpack compilar\u00e1 cualquier archivo que se incluya en este directorio durante el proceso de renderizado.<\/p>\n<h4>3. Components<\/h4>\n<p>El directorio components es similar al directorio components de Vue.js, donde se almacenan todos tus componentes Vue. Los componentes son los archivos que conforman las diferentes partes de tus p\u00e1ginas y pueden ser reutilizados e importados en tus p\u00e1ginas, dise\u00f1os y otros componentes tambi\u00e9n.<\/p>\n<h4>4. Layouts<\/h4>\n<p>La carpeta layouts almacena el dise\u00f1o de tu aplicaci\u00f3n y es muy \u00fatil para separar las diferentes estructuras de tu aplicaci\u00f3n para los usuarios autentificados o los usuarios invitados.<\/p>\n<p>Puedes crear muchos dise\u00f1os que se correspondan con la estructura de tu aplicaci\u00f3n. A veces, puedes querer que algunas p\u00e1ginas de tu sitio web tengan diferentes barras laterales, cabeceras, pies de p\u00e1gina, etc. Estos y otros elementos se estructuran mediante los archivos de dise\u00f1o almacenados en la carpeta de dise\u00f1os.<\/p>\n<h4>5. Middleware<\/h4>\n<p>Los middlewares son funciones personalizadas que pueden ejecutarse antes de renderizar una p\u00e1gina o un grupo de p\u00e1ginas (layout) y pueden definirse y almacenarse en la carpeta middlewares de Nuxt.js.<\/p>\n<p>Los middlewares son muy \u00fatiles cuando se crea un sitio web s\u00f3lo para miembros, y si quieres restringir el acceso a ciertas p\u00e1ginas, puedes configurar un middleware para comprobar si un usuario est\u00e1 conectado o no.<\/p>\n<p>En Nuxt.js, los middlewares funcionan de forma similar a los middlewares de cualquier <a href=\"https:\/\/kinsta.com\/es\/blog\/backend-vs-frontend\/\">framework de programaci\u00f3n backend<\/a>, como <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-express\/\">ExpressJS<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/laravel-9\/\">Laravel<\/a>, etc. Tiene tres tipos diferentes de middleware: middleware con nombre, an\u00f3nimo y de enrutamiento.<\/p>\n<h4>6. Pages<\/h4>\n<p>El directorio <code>pages<\/code> es la base del sistema de enrutamiento de Nuxt.js, ya que lee todos los archivos <code>.vue<\/code> dentro de este directorio y crea la configuraci\u00f3n del enrutador autom\u00e1ticamente.<\/p>\n<p>El directorio <code>pages<\/code> contiene las vistas y rutas de tu aplicaci\u00f3n, y cada componente de la p\u00e1gina es tambi\u00e9n un componente est\u00e1ndar de Vue.<\/p>\n<p>Aun as\u00ed, Nuxt.js lo trata como una ruta a\u00f1adiendo atributos y funciones especiales para facilitar al m\u00e1ximo el desarrollo de tu aplicaci\u00f3n universal.<\/p>\n<h4>7. Plugins<\/h4>\n<p>El directorio <code>plugins<\/code> contiene los c\u00f3digos JavaScript que quieres ejecutar antes de instanciar en la aplicaci\u00f3n root de Vue.js. Este es el lugar para a\u00f1adir plugins de Vue e inyectar funciones o constantes.<\/p>\n<p>En Nuxt.js, en lugar de utilizar la funci\u00f3n <code>Vue.use()<\/code>, s\u00f3lo tienes que crear un nuevo archivo en la carpeta de plugins e inyectar tu plugin de Vue en la instancia de Vue utilizando el archivo nuxt.config.js.<\/p>\n<h4>8. Static<\/h4>\n<p>La carpeta static contiene todos los archivos est\u00e1ticos de tu proyecto que probablemente no cambien o que deban ser renderizados sin ninguna compilaci\u00f3n sobre ellos.<\/p>\n<p>Todos los archivos incluidos en el directorio static ser\u00e1n servidos autom\u00e1ticamente por Nuxt.js y ser\u00e1n accesibles a trav\u00e9s de la <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-una-url\/\">URL<\/a> root de tu proyecto.<\/p>\n<p>Este directorio es excelente para archivos como <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-favicon\/\">favicon<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/robots-txt-de-wordpress\/\">robots.txt<\/a>, etc.<\/p>\n<h4>9. Store<\/h4>\n<p>El directorio store contiene todos los archivos de Vuex store, y est\u00e1 dividido en m\u00f3dulos por defecto.<\/p>\n<p>Vuex Store viene lista para usar, pero est\u00e1 desactivada por defecto. Tienes que activar store creando un archivo <code>index.js<\/code> dentro del directorio store.<\/p>\n<p>Un Vuex store es necesario cuando se crea y <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-empresarial\/\">gestiona un proyecto empresarial<\/a>. Por eso Nuxt.js viene preconstruido con el Vuex store y est\u00e1 configurado para adaptarse al desarrollo de aplicaciones de nivel empresarial.<\/p>\n<h3>P\u00e1ginas y Sistema de Enrutamiento de Nuxt.js<\/h3>\n<p>Nuxt.js hace que el sistema de enrutamiento sea tan f\u00e1cil como crear directorios y archivos en el directorio <code>pages<\/code>. Genera autom\u00e1ticamente un archivo de enrutamiento basado en la estructura de archivos y carpetas de ese directorio.<\/p>\n<p>Por ejemplo, si tienes un archivo <code>about.vue<\/code> en el directorio pages, convertir\u00e1 autom\u00e1ticamente la ruta, y entonces podr\u00e1s visitar la ruta en tu navegador para ver el contenido de la p\u00e1gina \u00abAbout\u00bb.<\/p>\n<p>Este sistema de rutas tambi\u00e9n te permite definir tres rutas diferentes con s\u00f3lo crear archivos y carpetas. Exploremos estos tipos de rutas con m\u00e1s detalle.<\/p>\n<h4>1. Rutas B\u00e1sicas<\/h4>\n<p>El enrutamiento b\u00e1sico son aquellas rutas que no requieren ninguna configuraci\u00f3n adicional para que funcionen. Es el tipo de ruta m\u00e1s sencillo y puede ser tan simple como <code>\/about<\/code>, <code>\/contact<\/code>, etc.<\/p>\n<p>Para crear un sistema de enrutamiento b\u00e1sico, puedes estructurar tu directorio de p\u00e1ginas como el siguiente:<\/p>\n<pre><code class=\"language-json\">pages\/\n--| services.vue\n--| contact.vue\n--| index.vue<\/code><\/pre>\n<p>Nuxt.js generar\u00e1 un archivo de enrutamiento utilizando los archivos que hayas a\u00f1adido en el directorio pages autom\u00e1ticamente:<\/p>\n<pre><code class=\"language-js\">router: {\n  routes: [\n    {\n      name: 'index',\n      path: '\/',\n      component: 'pages\/index.vue'\n    },\n    {\n      name: \u2018services\u2019,\n      path: '\/services\u2019,\n      component: 'pages\/services\u2019\n    },\n    {\n      name: 'contact',\n      path: '\/contact',\n      component: 'pages\/contact'\n    },\n  ]\n}<\/code><\/pre>\n<p>Ahora todos nuestros archivos est\u00e1n bien estructurados y enrutados autom\u00e1ticamente.<\/p>\n<h4>2. Rutas Anidadas<\/h4>\n<p>Las rutas anidadas son rutas que se crean dentro de una ruta padre. Las rutas anidadas se utilizan para crear m\u00faltiples niveles de enrutamiento profundo.<\/p>\n<p>Para crear rutas anidadas, crea una carpeta padre y coloca todos los archivos de ruta dentro de esa carpeta.<\/p>\n<p>Vamos a probar a crear una ruta anidada:<\/p>\n<pre><code class=\"language-json\">pages\/\n --| dashboard\/\n -----| user.vue\n -----| settings.vue\n --| dashboard.vue\n --| services.vue\n --| contact.vue\n --| index.vue<\/code><\/pre>\n<p>En la estructura de carpetas anterior, creamos un nuevo archivo y una carpeta con el mismo nombre que <code>dashboard<\/code>, y a continuaci\u00f3n a\u00f1adimos un archivo <code>user.vue<\/code> y otro <code>settings.vue<\/code> como hijos de la carpeta <code>dashboard<\/code>.<\/p>\n<p>Esta sencilla estructura de carpetas generar\u00e1 un enrutador con rutas similares a la siguiente:<\/p>\n<pre><code class=\"language-js\">router: {\n  routes: [\n    {\n      name: 'index',\n      path: '\/',\n      component: 'pages\/index.vue'\n    },\n    {\n      name: 'services',\n      path: '\/services',\n      component: 'pages\/services'\n    },\n    {\n      name: 'contact',\n      path: '\/contact',\n      component: 'pages\/contact'\n    },\n    {\n      name: 'dashboard',\n      path: '\/dashboard',\n      component: 'pages\/dashboard.vue',\n      children: [\n        {\n          name: 'dashboard-user',\n          path: '\/dashboard\/user',\n          component: 'pages\/dashboard\/user.vue'\n        },\n        {\n          name: 'dashboard-settings',\n          path: '\/dashboard\/settings',\n          component: 'pages\/dashboard\/settings.vue'\n        }\n      ]\n    }\n  ]\n}<\/code><\/pre>\n<p>Las rutas anidadas son un poco engorrosas de crear en Vue.js, especialmente si tienes que crear muchas, como puedes ver en el ejemplo de c\u00f3digo anterior, pero Nuxt.js lo ha simplificado y facilitado creando \u00fanicamente archivos Vue en una carpeta anidada.<\/p>\n<h4>3. Rutas Din\u00e1micas<\/h4>\n<p>Las rutas din\u00e1micas se crean con rutas desconocidas, ya sea porque dependen de una llamada a la API o porque no quieres crear la p\u00e1gina repetidamente. Son rutas que se definen a partir de una variable, ya sea un nombre, un n\u00famero o un ID recuperado de los datos del cliente en la aplicaci\u00f3n.<\/p>\n<p>Esto es \u00fatil cuando construyes una app de noticias, por ejemplo, en la que no conoces el ID o el slug del post que el usuario va a pulsar para leer. Pero con la ruta din\u00e1mica, puedes recuperar el ID\/slug de la entrada y mostrar la entrada correcta con el ID\/slug.<\/p>\n<p>Para crear una ruta din\u00e1mica, a\u00f1ade un gui\u00f3n bajo al nombre del archivo o directorio .vue. Puedes nombrar el archivo o directorio con el nombre que quieras, pero hay que a\u00f1adir un gui\u00f3n bajo para que sea din\u00e1mico.<\/p>\n<p>Por ejemplo, si defines un archivo <code>_slug.vue<\/code> en el directorio pages, puedes acceder al valor mediante el objeto <code>params.slug<\/code>. Vamos a demostrar con un ejemplo c\u00f3mo crear una ruta din\u00e1mica:<\/p>\n<pre><code class=\"language-json\">pages\/\n--|user\/\n-----| index.vue\n-----| about.vue\n-----| _routeName\n-------| index.vue\n-------| info.vue\n--| dashboard\/\n-----| user.vue\n-----| settings.vue\n--| dashboard.vue\n--| services.vue\n--| _id.vue\n--| contact.vue\n--| index.vue<\/code><\/pre>\n<p>Si a\u00f1ades el gui\u00f3n bajo a <code>_id<\/code> y <code>_routeName<\/code> crear\u00e1s una ruta din\u00e1mica para la p\u00e1gina con el par\u00e1metro ID, junto con una ruta padre con un par\u00e1metro cadena con las rutas hijas anteriores. Esta estructura de p\u00e1gina generar\u00e1 un enrutador con las siguientes rutas dentro del archivo:<\/p>\n<pre><code class=\"language-js\">   {\n      name: 'work',\n      path: '\/work',\n      component: 'pages\/work'\n    },\n    {\n      name: 'contact',\n      path: '\/contact',\n      component: 'pages\/contact'\n    },\n    {\n      name: 'id',\n      path: '\/:id',\n      component: 'pages\/_id.vue'\n    }\n    {\n      name: 'user',\n      path: '\/user',\n      component: 'pages\/user\/index.vue'\n    },\n    {\n      name: 'user-about',\n      path: '\/user\/about',\n      component: 'pages\/user\/about.vue'\n    },\n    {\n      name: 'user-routeName',\n      path: '\/user\/:routeName',\n      component: 'pages\/user\/_routeName\/index.vue'\n    },\n    {\n      name: 'user-routeName-info',\n      path: '\/user\/:routeName\/info',\n      component: 'pages\/user\/route.vue'\n    },\n    {\n      name: 'dashboard',\n      path: '\/dashboard',\n      component: 'pages\/dashboard.vue',\n      children: [\n        {\n          name: 'dashboard-user',\n          path: '\/dashboard\/user',\n          component: 'pages\/dashboard\/user.vue'\n        },\n        {\n          name: 'dashboard-settings',\n          path: '\/dashboard\/settings',\n          component: 'pages\/dashboard\/settings.vue'\n        }\n      ]\n    }\n  ]\n}<\/code><\/pre>\n<p>Ahora que hemos explorado los diferentes sistemas de enrutamiento que vienen incorporados en el framework Nuxt.js, vamos a aprender a crear y gestionar almacenes Vuex.<\/p>\n<h3>Uso de Vuex Store en Nuxt.js<\/h3>\n<p>Nuxt.js resuelve un importante problema de la estructura de Vue al agilizar el manejo de Vuex cuando se construye un proyecto empresarial. La carpeta store se construye autom\u00e1ticamente al crear una nueva aplicaci\u00f3n.<\/p>\n<p>Puedes activar Vuex Store creando un archivo <code>index.js<\/code> dentro de la carpeta store. Con esta sencilla mejora, Vuex store se estructura y modula ahora siguiendo las mejores pr\u00e1cticas descritas en la documentaci\u00f3n oficial de Vuex, lo que favorece el desarrollo de aplicaciones a gran escala.<\/p>\n<p>Tu archivo <code>index.js<\/code> debe contener la siguiente estructura para que se corresponda con la forma en que Nuxt.js estructura tu Vuex store. Echemos un vistazo:<\/p>\n<pre><code class=\"language-js\">export const state = () =&gt; ({\n  \n})\nexport const getters = {\n\n}\nexport const mutations = {\n  \n}\nexport const actions = {\n  \n}<\/code><\/pre>\n<p>Nuxt.js te permite utilizar el <a href=\"https:\/\/www.planetgeek.ch\/2012\/01\/25\/3077\/\" target=\"_blank\" rel=\"noopener noreferrer\">enfoque de divisi\u00f3n por caract\u00e9risticas<\/a> en tu aplicaci\u00f3n a gran escala. Con este enfoque, creas diferentes archivos de Vuex store para que se correspondan con las caracter\u00edsticas que tienes en tus aplicaciones. Por ejemplo, si tu aplicaci\u00f3n tiene caracter\u00edsticas de usuarios, publicaciones y comentarios, puedes crear estos archivos diferentes como <code>users.js<\/code>, <code>posts.js<\/code>, y <code>comments.js<\/code> en tu directorio store.<\/p>\n<p>Este m\u00e9todo facilita el acceso a un archivo store concreto en funci\u00f3n de la caracter\u00edstica de la aplicaci\u00f3n, transformando el tedioso proceso de localizaci\u00f3n y actualizaci\u00f3n de datos en un paseo sin esfuerzo.<\/p>\n\n<h2>Resumen<\/h2>\n<p>Nuxt.js es un framework de Vue muy popular para el SSR y el frontend generado est\u00e1ticamente. No s\u00f3lo resuelve el problema de la configuraci\u00f3n y puesta en marcha de SSR en las aplicaciones Vue, sino que tambi\u00e9n impulsa el desarrollo de aplicaciones empresariales al adherirse a las mejores pr\u00e1cticas de estructuraci\u00f3n y arquitectura de aplicaciones Vue a gran escala.<\/p>\n<p>Esta gu\u00eda explora todo lo que necesitas saber sobre Nuxt.js, incluyendo lo que puedes construir con \u00e9l. Hablamos de las p\u00e1ginas generadas est\u00e1ticamente, de las aplicaciones de una sola p\u00e1gina (SPA) y de las aplicaciones universales, junto con la forma de desarrollarlas con Nuxt.js.<\/p>\n<p>Ahora has visto por ti mismo lo f\u00e1cil y beneficioso que puede ser elegir Nuxt.js para tu pr\u00f3ximo proyecto de gran empresa. \u00a1Haznos saber en la secci\u00f3n de comentarios qu\u00e9 vas a construir con estos nuevos superpoderes!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nuxt.js es el framework Vue m\u00e1s intuitivo disponible en la actualidad. Combina la potencia de Vue.js con las caracter\u00edsticas de renderizado del lado del servidor para &#8230;<\/p>\n","protected":false},"author":193,"featured_media":53353,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[1042,867,804,1118,1119],"topic":[1296,1326,1333],"class_list":["post-53352","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-frontend-development","tag-javascript","tag-javascript-frameworks","tag-nuxt","tag-nuxt-js","topic-frameworks-javascript","topic-smtp","topic-vue-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u00bfQu\u00e9 es Nuxt.js? M\u00e1s informaci\u00f3n sobre el Intuitivo Framework Vue<\/title>\n<meta name=\"description\" content=\"\u00bfEres nuevo en Nuxt.js? Te explicaremos todo lo que necesitas saber para empezar a utilizar este popular framework JavaScript basado en Vue.js.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfQu\u00e9 es Nuxt.js? M\u00e1s informaci\u00f3n sobre el Intuitivo Framework Vue\" \/>\n<meta property=\"og:description\" content=\"\u00bfEres nuevo en Nuxt.js? Te explicaremos todo lo que necesitas saber para empezar a utilizar este popular framework JavaScript basado en Vue.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-16T11:37:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:32:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/nuxt-js.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Solomon Eseme\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"\u00bfEres nuevo en Nuxt.js? Te explicaremos todo lo que necesitas saber para empezar a utilizar este popular framework JavaScript basado en Vue.js.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/nuxt-js.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kaperskyguru\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Solomon Eseme\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/\"},\"author\":{\"name\":\"Solomon Eseme\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\"},\"headline\":\"\u00bfQu\u00e9 es Nuxt.js? M\u00e1s informaci\u00f3n sobre el Intuitivo Framework Vue\",\"datePublished\":\"2022-06-16T11:37:51+00:00\",\"dateModified\":\"2025-10-01T19:32:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/\"},\"wordCount\":3509,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/nuxt-js.jpg\",\"keywords\":[\"frontend development\",\"JavaScript\",\"JavaScript Frameworks\",\"nuxt\",\"nuxt.js\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/\",\"name\":\"\u00bfQu\u00e9 es Nuxt.js? M\u00e1s informaci\u00f3n sobre el Intuitivo Framework Vue\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/nuxt-js.jpg\",\"datePublished\":\"2022-06-16T11:37:51+00:00\",\"dateModified\":\"2025-10-01T19:32:28+00:00\",\"description\":\"\u00bfEres nuevo en Nuxt.js? Te explicaremos todo lo que necesitas saber para empezar a utilizar este popular framework JavaScript basado en Vue.js.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/nuxt-js.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/nuxt-js.jpg\",\"width\":1460,\"height\":730,\"caption\":\"\u00bfQu\u00e9 es Nuxt.js? M\u00e1s informaci\u00f3n sobre el Intuitivo Framework Vue\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frameworks JavaScript\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/frameworks-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u00bfQu\u00e9 es Nuxt.js? M\u00e1s informaci\u00f3n sobre el Intuitivo Framework Vue\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\",\"name\":\"Solomon Eseme\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"caption\":\"Solomon Eseme\"},\"description\":\"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me\",\"sameAs\":[\"https:\/\/masteringbackend.com\",\"https:\/\/linkedin.com\/in\/solomoneseme\",\"https:\/\/x.com\/kaperskyguru\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/solomoneseme\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u00bfQu\u00e9 es Nuxt.js? M\u00e1s informaci\u00f3n sobre el Intuitivo Framework Vue","description":"\u00bfEres nuevo en Nuxt.js? Te explicaremos todo lo que necesitas saber para empezar a utilizar este popular framework JavaScript basado en Vue.js.","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:\/\/kinsta.com\/es\/blog\/nuxt-js\/","og_locale":"es_ES","og_type":"article","og_title":"\u00bfQu\u00e9 es Nuxt.js? M\u00e1s informaci\u00f3n sobre el Intuitivo Framework Vue","og_description":"\u00bfEres nuevo en Nuxt.js? Te explicaremos todo lo que necesitas saber para empezar a utilizar este popular framework JavaScript basado en Vue.js.","og_url":"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2022-06-16T11:37:51+00:00","article_modified_time":"2025-10-01T19:32:28+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/nuxt-js.jpeg","type":"image\/jpeg"}],"author":"Solomon Eseme","twitter_card":"summary_large_image","twitter_description":"\u00bfEres nuevo en Nuxt.js? Te explicaremos todo lo que necesitas saber para empezar a utilizar este popular framework JavaScript basado en Vue.js.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/nuxt-js.jpeg","twitter_creator":"@kaperskyguru","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Solomon Eseme","Tiempo de lectura":"16 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/"},"author":{"name":"Solomon Eseme","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2"},"headline":"\u00bfQu\u00e9 es Nuxt.js? M\u00e1s informaci\u00f3n sobre el Intuitivo Framework Vue","datePublished":"2022-06-16T11:37:51+00:00","dateModified":"2025-10-01T19:32:28+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/"},"wordCount":3509,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/nuxt-js.jpg","keywords":["frontend development","JavaScript","JavaScript Frameworks","nuxt","nuxt.js"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/","url":"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/","name":"\u00bfQu\u00e9 es Nuxt.js? M\u00e1s informaci\u00f3n sobre el Intuitivo Framework Vue","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/nuxt-js.jpg","datePublished":"2022-06-16T11:37:51+00:00","dateModified":"2025-10-01T19:32:28+00:00","description":"\u00bfEres nuevo en Nuxt.js? Te explicaremos todo lo que necesitas saber para empezar a utilizar este popular framework JavaScript basado en Vue.js.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/nuxt-js\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/nuxt-js.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/nuxt-js.jpg","width":1460,"height":730,"caption":"\u00bfQu\u00e9 es Nuxt.js? M\u00e1s informaci\u00f3n sobre el Intuitivo Framework Vue"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/nuxt-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Frameworks JavaScript","item":"https:\/\/kinsta.com\/es\/secciones\/frameworks-javascript\/"},{"@type":"ListItem","position":3,"name":"\u00bfQu\u00e9 es Nuxt.js? M\u00e1s informaci\u00f3n sobre el Intuitivo Framework Vue"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2","name":"Solomon Eseme","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","caption":"Solomon Eseme"},"description":"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me","sameAs":["https:\/\/masteringbackend.com","https:\/\/linkedin.com\/in\/solomoneseme","https:\/\/x.com\/kaperskyguru"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/solomoneseme\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/53352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=53352"}],"version-history":[{"count":13,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/53352\/revisions"}],"predecessor-version":[{"id":55817,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/53352\/revisions\/55817"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/53352\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/53352\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/53352\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/53352\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/53352\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/53352\/translations\/fr"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/53352\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/53353"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=53352"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=53352"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=53352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}