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 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
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
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 😎