Qué es NuxtJS y Por qué utilizarlo

NuxtJS es un framework que se utiliza para el desarrollo de aplicaciones web. Podemos utilizar nuxtJS para crear aplicacion estáticas(static page), de una sola página (SPA) o de servidor (SSR).

NuxtJS y Vuejs

NuxtJS es un framework que trabaja sobre VueJS, esto quiere decir que tenemos todo lo bueno de VueJS pero contando ya con una organización y configuración establecida desde el principio, que ayuda al desarrollador a enfocarse 100% en el desarrollo desde el principio.

Es MUY recomendable, que tengas una mínima base de VueJS antes de comenzar con Nuxt, porque aunque no es imprescindible, entederas todo muchísimo mejor que si empiezas con él directamente.

Visita nuestro artículo de Vuejs sobre 👉 Primeros pasos en VueJS

Por qué utilizar NuxtJS

  • Cuenta con una estructura de carpetas ya definida. Según crece nuestra aplicación, la organización de nuestro código se vuelve de lo más importante y qué mejor que tener ya una estructura definida desde el principio.
  • El enrutamiento de NuxtJS es realmente sencillo a comparación con el de VueJS. Más adelante del artículo veremos un ejemplo del enrutado de nuxtJs que nos encantará.
  • Viene con una configuración lista para producción.
  • A diferencia de VueJS, NuxtJS cuenta con SSR (server side rendering) para que que se indexen las paginas de nuestra web en los buscadores y se optimice el SEO. 
  • Diferentes modos funcionamiento en nuestra aplicación Nuxtjs, podemos hacer paginas estaticas, como ssr como spa.

Instalación de NuxtJS

Para instalar nuxtJS con node debemos tener una versión igual o superior a npm 5.2.0 o Yarn

Si utilizamos node para instalarlo utilizaremos este comando en nuestra terminal:

$npx create-nuxt-app <project-name>

Y con yarn:

$yarn create nuxt-app <project-name>

Una vez ejecutemos este comando, nos preguntará  una configuración previa para instalar librerías y modulos y así no tener que preocuparnos de nada más. En dicho «cuestionario» podremos elegir modulos a instalar, como Vuex, Axios, frameworks UI como vuetify y bootstrap, y también podemos elegir si trabajar con javascript o typescript en NuxtJS.

Una vez instalado todo, navegaremos a la ruta de nuestro proyecto y ejecutaremos 

npm run dev

Cuando se termine tendremos  nuestra aplicación en funcionamiento. Normalmente se levanta en localhost:3000

Rutas en NuxtJS

Cómo hemos hablado anteriormente, nuxtJS facilita muchísimo el enrutado de Vuejs, así que vamos a ver un ejemplo de como crear rutas en Nuxtjs.

En este pequeño ejemplo vamos a crear dos rutas, la primera va a ser /blog y la segunda /blog/{{categoria}}.

Las rutas en NuxtJS funciona con la estructura de carpetas que tengamos en la carpeta «pages». Es decir, para crear una ruta /blog lo que tenemos que hacer es crear una carpeta blog y añadir dentro index.vue:

<template>
    <h2>BLOG</h2>
</template>

<script>
export default {

}
</script>

<style>

</style>

Y si navegamos hacia localhost:3000/blog, deberíamos ver nuestra página de blog.

Ahora que sabemos como crear una ruta estática, crearemos una dinámica, donde el segundo parametro varíe. Para ellos crearemos dentro de la carpeta blog, otra carpeta que se llame _category y añadiremos tambien a ésta otro index.vue, pero ahora mostraremos en el h2 la categoría que hayamos escrito en la url.

Mediante una propiedad computada (aprende qué es una propiedad computada en 👉 Propiedades computadas en Vuejs ) accederemos a la categoría escrita en la URL:

<template>
    <h2>Blog sobre {{category}}</h2>
</template>

<script>
export default {
    computed:{
        category(){
            return this.$nuxt._route.params.category;
        }
    },
}
</script>

<style>

</style>

Finalmente, la estructura sería esta:

Esto es un ejemplo de una de las muchas cosas que Nuxtjs nos facilita de Vuejs

Espero que te haya gustado esta introducción a NuxtJS y que te animes a utilizarlo en tus próximos proyectos 😎