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.
|
1 |
vue init nuxt/starter <nombre> |
Substituimos <nombre> por el nombre que queramos darle a nuestro proyecto.
Instalamos las dependencias:
|
1 |
npm install |
Y lo ejecutamos:
|
1 |
npm run dev |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<template> <section class="container"> <div> <nuxt-link to="/">Home</nuxt-link> <nuxt-link to="/about">About</nuxt-link> <nuxt-link to="/contact">Contact</nuxt-link> <p>About page</p> </div> </section> </template> <script> export default { } </script> <style> .container { min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } </style> |
Y creamos otro llamado contact.vue :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<template> <section class="container"> <div> <nuxt-link to="/">Home</nuxt-link> <nuxt-link to="/about">About</nuxt-link> <nuxt-link to="/contact">Contact</nuxt-link> <p>Contact page</p> </div> </section> </template> <script> export default { } </script> <style> .container { min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } </style> |
Y ahora modificamos el index.vue añadiéndole estas líneas:
|
1 2 3 4 5 6 7 8 9 10 11 |
<template> <section class="container"> ... <nuxt-link to="/">Home</nuxt-link> <nuxt-link to="/about">About</nuxt-link> <nuxt-link to="/contact">Contact</nuxt-link> ... </section> </template> ... |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<template> <div> <section class="container"> <div> <nuxt-link to="/">Home</nuxt-link> <nuxt-link to="/about">About</nuxt-link> <nuxt-link to="/contact">Contact</nuxt-link> </div> <nuxt/> </section> </div> </template> <style> html { font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; word-spacing: 1px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; box-sizing: border-box; } *, *:before, *:after { box-sizing: border-box; margin: 0; } .button--green { display: inline-block; border-radius: 4px; border: 1px solid #3b8070; color: #3b8070; text-decoration: none; padding: 10px 30px; } .button--green:hover { color: #fff; background-color: #3b8070; } .button--grey { display: inline-block; border-radius: 4px; border: 1px solid #35495e; color: #35495e; text-decoration: none; padding: 10px 30px; margin-left: 15px; } .button--grey:hover { color: #fff; background-color: #35495e; } .container { min-height: 100vh; justify-content: center; align-items: center; text-align: center; } </style> |
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:
|
1 2 3 4 5 |
<script> export default { layout: 'layout-custom' } </script> |
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
-
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