Primera aplicación con Nuxtjs, aplicaciones Universales con Vuejs 2
Primera aplicación con Nuxtjs, aplicaciones Universales con Vuejs 2


Bienvenido, en este tutorial vamos a ver lo sencillo que es crear nuestra Primera aplicación con Nuxtjs si todavía no lo conoces, simplemente piensa que son aplicaciones Universales con Vuejs 2, es decir, Server Side Rendering con Vuejs 2 con todas las ventajas del SEO que nos niegan las aplicaciones SPA.

Primer proyecto con Nuxtjs

Lo primero que debemos hacer es instalar la última versión de vue-cli con el siguiente comando.

Una vez tenemos vue-cli instalado, vamos a crear nuestro proyecto utilizando la template starter-template, para ello, vamos a ejecutar el siguiente comando, recuerda ejecutarlo en el directorio donde quieras crear el proyecto.

Este comando hará unas pocas preguntas y creará dentro del directorio hola-mundo un completo proyecto con Nuxtjs con la siguiente estructura.



Nuxtjs, a diferencia de Vuejs, maneja toda la lógica a través de páginas (pages) utilizando de forma dinámica el router, es decir, si creamos la página users, tendremos de forma automática la ruta /users sin hacer nada.

Hola Mundo con Nuxtjs

Ahora vamos a crear un sencillo hola mundo, para ello, crea el archivo pages/hola-mundo.vue y añade el siguiente código.

El tag template es requerido para cualquier página o componente de Vuejs, y el script opcional, desde éste enviamos la variable hello_world para poder utilizar en la template a través del método data, que representa los datos de nuestra página en este caso.

Arrancar nuestra aplicación

Para poner en marcha nuestra aplicación simplemente ejecuta cualquiera de los 2 comandos, dependiendo de si utilizas npm o yarn.

Si ahora visitas la url http://localhost:3000/hola-mundo verás que aparece nuestro mensaje y todo está funcionando, es así de simple :).

Añadiendo Bootstrap 4 a Nuxtjs

Existen muchas formas de añadir dependencias externas a Nuxtjs, las formas más típicas son a través de plugins o directamente desde la configuración head de nuestro archivo nuxt.config.js, en este caso nosotros vamos a utilizar esta última, así que abre el archivo nuxt.config.js y modifica el objeto head.link por el siguiente para añadir el cdn de Bootstrap 4.

Si ahora refrescas el navegador, verás que todo está funcionando perfectamente utilizando Bootstrap 4, puedes ver el código fuente y verás que ha sido añadido en la cabecera de forma automática :).

De momento eso es todo, cómo puedes ver, es una aplicación muy sencilla, pero esto es sólo la punta del iceberg, Nuxt es muy potente y modular, de forma sencilla podemos hacer cosas complejas, si te ha gustado, te invito a que revises el curso que tengo en marcha y te inscribas, se estará actualizando constantemente con material valioso para tus desarrollos.

Acceder al curso de Nuxtjs.