Vue.js 2 #12 : Aplicaciones Vue.js Universales con Nuxt.js

Nuxt.js es un framework para crear aplicaciones universales en Vue.js. Una aplicación universal es aquella que su código puede ser ejecutado tanto en el cliente como en el servidor. Nuxt.js tiene muchas características, pero una de las más interesantes es que nos ayuda a crear aplicaciones Vue.js que se renderizan del lado del servidor (SSR – Server-Side Rendering). Esto quiere decir que se precargan las páginas en el servidor y luego se envía el HTML renderizado al navegador.

Instalación

Vamos a instalarlo! Lo instalaremos a partir de un starter (tenemos que tener instalado vue-cli) que nos proporcionan los creadores de Nuxt.js, aunque también podemos instalarlo desde cero.

Substituimos <nombre> por el nombre que queramos darle a nuestro proyecto.

Instalamos las dependencias:

Y lo ejecutamos:

Y si entramos a http://localhost:3000/, veremos algo así:

 

Vamos a hacer una prueba para comprobar el Hot reloading que es otra de las características que posee Nuxt.js. El Hot reloading nos ayuda a que cada vez que hagamos cambios en el código y guardemos, el servidor recompilará el código y refrescará la página con los cambios, y así, podremos verlos plasmados sin hacer nada más:

 

Crear páginas

Ahora vamos a crear un par de páginas nuevas de ejemplo. Estas páginas se crean a partir de componentes de un solo archivo de Vue.js y se tienen que añadir en la carpeta pages . Vamos a crear alguna de ejemplo, a parte de la del index.vue que ya venía creada de ejemplo y que vamos a modificar ahora.

Creamos un archivo about.vue  en la carpeta pages :

Y creamos otro llamado contact.vue :

Y ahora modificamos el index.vue  añadiéndole estas líneas:

Si entramos en http://localhost:3000, veremos que se nos ha puesto un menú con unos enlaces a las páginas que hemos creado:

El enrutador de Nuxt.js es muy potente y tiene muchas opciones: puedes añadir rutas dinámicas que dependan de parámetros, puedes crear rutas padres con hijos, etc. En la documentación puedes encontrar toda esta información y más.

 

Crear layout

Ahora vamos a crear un layout para no repetir código compartido entre las páginas (en nuestro caso, será el menú recién creado). Vamos a la carpeta layouts  y creamos un archivo llamado custom-layout.vue , como vemos ya existe uno ( default.vue ) que es el que se coge por defecto:

Si te fijas, el código está basado en el del layout  default.vue , lo único que modificando lo que nos interesa.

Como vemos hemos pasado código, que estaba en los archivos creados anteriormente, el cual tendremos que borrar, (es código CSS y HTML) porque ahora añadiremos una línea a estos archivos ( pages ) la cual hará que las páginas extiendan este layout y, por tanto, que ya contengan ese código:

Con esto, obtendremos el mismo resultado que anteriormente, pero con la navegación arriba del todo, ya que se ha añadido en el layout antes que el contenido de la página (<nuxt/>):

 

Pues con ésto finalizamos la entrada, lo más seguro es que haga otra o otras entradas, no sé, sobre Nuxt.js ya que tiene muchas cosas para experimentar con ellas. Por ejemplo, se integra con Vuex, se pueden generar webs estáticas y subirlas a GitHub Pages o a otro servidor, etc, etc.

 

Puedes ver el código completo de la entrada en: https://github.com/fullstackseriescom/vuejs-2-series/tree/master/012-nuxtjs-ssr

 

-

– https://nuxtjs.org/guide

 


Aloja tu proyecto en DigitalOcean: Obtén $200 de crédito gratis al registrarte a través de este enlace.

Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.

? CONTACTAR

Deja una respuesta

  Acepto la política de privacidad