Desarrollo y diseño

NuxtJS - The Vue.js Framework

MisKo
MisKo #1 May '19

NuxtJS - The Vue.js Framework

A raiz de otro hilo, habían muchísimas personas ( 3 ) diciendome que creara un hilo de NuxtJS y, aunque tampoco lo he tocado mucho en profundidad, lo dejo por aqui creado por si a alguien lo está utilizando y tiene alguna duda o, si alguien no lo conoce y se anima a ponerse con el, que tenga un sitio por donde empezar.

De todas formas, en su guía oficial viene todo bastante bien explicado: https://nuxtjs.org/guide

¿Por qué NuxtJS?

NuxtJS es un framework de VueJS. Nace con la idea de mejorar varios aspectos o problemas que podemos encontrar con el desarrollo de VueJS como, por ejemplo, la compatibilidad con SEO (sin necesidad de SSR), pero quien mejor que ellos para explicarlo:

A nivel personal, lo que me gusta:

  • Estandariza la estructura de carpetas para aplicaciones con VueJS
  • Viene preconfigurado con VueX, Vue Router y Vue Meta
  • Como he mencionado anteriormente, es SEO friendly incluso sin necesidad de SSR
  • Las rutas se configuran automáticamente a raiz de tus archivos
  • Ocupa 60kB min+gzip (57kB sin Vuex).

Estructura de carpetas - Doc Oficial

Aunque las carpetas son autoexplicativas, NuxtJS crea la siguiente estructura:

Assets

Assets sin compilar como imágenes, fuentes, css/sass

Components

En esta carpeta irían los componentes que vayas a reutilizar en varios sitios de tu proyecto.

Layouts

Cuando creemos nuestras páginas, podemos configurarlas con distintos layouts (por ejemplo, contenido al 100% vs contenido + sidebar), que irán directamente en esta carpeta.

Middleware

En esta carpeta pondrás las distintas funciones que quieras ejecutar antes de la carga de tus páginas.

Pages

En este directorio van las distintas páginas de tu proyecto. NuxtJS utiliza automáticamente los archivos de esta carpeta para crear las rutas finales de la aplicación
Por ejemplo, la página about.vue , es accesible desde localhost:3000/about

Plugins

En esta carpeta es donde pondrás los plugins que registres globalmente

Static

Esta carpeta se mapeará directamente a la raiz de la aplicación, por lo que los archivos que pongas en esta carpeta serán accesibles desde /
Por ejemplo:

  • static/favicon.ico => localhost:3000/favicon.ico
  • static/robots.txt => localhost:3000/robots.txt
Store

En esta carpeta meteras los archivos relacionados con Vuex. Inicialmente Vuex viene desactivado y en esta carpeta no viene ningún archivo, pero en el momento que agregues uno, Vuex se activará automáticamente.

Archivo nuxt.config.js

Aunque no es un directorio, la configuración principal de la aplicación la harás a través de este archivo. Puedes ver todas las posibilidades aqui: https://nuxtjs.org/guide/configuration

Como empezar con NUXT - Install

Parar crear un proyecto, se necesita tener NodeJS instalado en el equipo. A partir de ahí, tendremos disponible el comando npx create-nuxt-app NombreProyecto.

Con este comando, nos creará una carpeta con el nombre del proyecto indicado en el directorio en el que lo ejecutemos y nos hará varias preguntas para preconfigurar NuxtJS:

Como ejemplo, para el hilo he configurado algo tal que así:

Sobre la elección, en concreto:

  • PWA: Aunque sea algo que no sepas ni lo que es, es interesante activarlo si en producción vas a tener un certificado SSL instalado, ya que te podrás aprovechar de varias características que incluye PWA por defecto en NuxtJS como por ejemplo el cacheo de assets y visualización offline a través de los workers con Google Workbox
  • Axios: Librería para ajax.
  • Element-UI: Es un framework al que estoy acostumbrado. Lo utilizo básicamente para notificaciones en pantalla, loadings entre operaciones y algun campo en concreto, como los calendarios. Actualmente tiene un bug para NuxtJS :clown: y hay que desactivarlo en SSR

Comandos de desarrollo/producción

Una vez tenemos inicializado el proyecto, tal y como aparece en el pantallazo, disponemos de varios comandos para iniciar el desarrollo:

  • npm run dev : Inicia el servidor en local.
  • npm run build && npm run start: Hace una build del proyecto para producción y lo lanza.
  • npm run generate: Crea una build con los archivos necesarios para distribuir tu proyecto en un servidor web simple sin necesidad de usar tecnología SSR.

Seo Friendly

Como he mencionado anteriormente, una de las cosas que me gustan de NuxtJS es que sin necesidad de tecnología SSR en el servidor te puede generar una build con los contenidos de la página. Para ello, cuando inicia la build monta su propio servidor en local y genera los HTMLs con el contenido que debería de tener al final.

Como igual explicado no es muy facil de entender, os pongo un ejemplo práctico:

En el caso de Angular, si generas una build para producción sin SSR, el HTML final (y lo que ve el bot de google) es de este estilo y, a partir de aqui, carga Angular:

En el caso de NuxtJS, cada HTML tiene el contenido final, por lo que Google lo puede leer y, a partir de ahí, NuxtJS carga el resto. Aunque en el pantallazo veais data-server-rendered=true es porque lo ha generado en local, pero es una web estática final:
https://dist-kpzgiisgcj.now.sh

Para terminar

Para terminar ya con el post, que ha quedado más largo de lo que me gustaría, os dejo un link a la cheatsheet de NuxtJS para que la tengais a mano: https://dist-kpzgiisgcj.now.sh/cheatsheet.pdf

Trae más cosas de las que he hablado, pero entre la documentación oficial y la cheatsheet, yo creo que podeis empezar a trastear bastante xD

Pues ala, a ver si no se muere el post y a alguien le vale de algo xD

17
Troyer
Troyer #2 May '19 Cofarde

Gracias crack.

Leos
Leos #3 May '19

Grande @MisKo

MisKo
MisKo #4 May '19

Cuando no tenga tanto curro, cogeré el script de imgur que hicimos hace 1 año en mediavida, y lo pasaré a nuxt para dejarlo por aqui, así hay un ejemplo de un proyecto 'real' montado con Nuxt para quien le pueda interesar.

Aprovecharé y cambiaré el backend de lumen a algo con nodeJS para intentar montarlo con lambdas, que es algo que también quiero probar y así hago 2x1 xD

#5
comentario moderado
1 comentario moderado
15 días después
Zerokkk
Zerokkk #6 May '19

¿Qué tal lleva ido esto para los que lo estáis usando? ¿Tiene bastante comunidad y contenido complementario? ¿Funciona bien?

2 respuestas
MisKo
MisKo #7 May '19

#6 Yo lo he usado en varios sitios y de momento estoy encantado, pero al final, todo depende del proyecto y de la gente que vaya a tocarlo y sus conocimientos (como casi todos los desarrollos a día de hoy :D)

De todas formas, montar una página de testeo y alguna chorrada es bastante rápido para ponerse con ello y hacer pruebas a ver si te convence.

Yo tengo pendiente traer el imgur-script que hicimos en mediavida hace un año/año y medio pasándolo a NuxtJS, pero no saco tiempo :(

guito
guito #8 May '19

#6 Yo llevo desarrollando en nuxtjs más de 1 año y estoy muy contento. He creado una página multi idioma, con parte que es HTML generada estáticamente y parte que no, etc. Al principio estuve mirando Angular, pero necesitaba que fuese SEO friendly + multi idioma y no encontré ninguna manera de hacerlo facilmente.

La web es la siguiente, por si queréis echarle un ojo a la performance y todo eso (es de clases de inglés online): https://es.speakingathome.com

Hay algo con lo que todavía no estoy muy seguro de que hacer y es con los css. Ahora mismo los tengo en el head del html, pero creo que hace que baje mucho el code/text ratio y en teoría eso es malo para el SEO. No sé si sacarlo a un fichero externo con la opción de extraer css o seguir así

module.exports = {
  build: {
    extractCSS: true
  }
}
3 respuestas
MisKo
MisKo #9 May '19

#8 A nivel de SEO, creo que tiene más valor que tengas todo inline (y por ello, no se hacen cargas de archivos externos ni se para la carga de la página en ningún momento) a que tengas todo el troncho de CSS ahí metido.

He estado viendo la web y, simplemente por gusto personal, tengo algunos comentarios xDD :

spoiler
1 respuesta
guito
guito #10 May '19

#9 Gracias! Voy a mirar lo de las animaciones :-)

Sobre el recaptcha no estoy de acuerdo, creo que casi todas las páginas lo tienen. Sí que es cierto que se podría empezar a mostrar a partir de cierto número de intentos :-)

Fyn4r
Fyn4r #11 May '19 Inocente

#8 pensaba que era una Web de domótica, que decepción jjajaja

2 1 respuesta
guito
guito #12 May '19

#11 jajajajaja ya he editado para que no haya confusión :-D

25 días después
MisKo
MisKo #13 Jun '19

Buenas de nuevo !

En netlify ya podeis ver funcionando el ejemplo que quiero traer al hilo de NUXT y en github teneis el código fuente (lo correspondiente a NUXT está en la carpeta frontend)

Para el ejemplo, me he basado en un proyecto anterior que hice para mediavida cuando estaba empezando con Vue (en modo jquery) y probando Lumen. Podeis verlo aquí tambien.

Proyecto

En lo referente al proyecto, me he puesto a meter varias cosas de Vue y NUXT para que hayan distintas partes que ver:

  • Componentes ( carga de componentes, paso de propiedades y emision de eventos )
  • Varias páginas ( index y upload ) , cada una con su SEO título y SEO descripción
  • Uso de animaciones con la etiqueta transition
  • Propiedades dinámicas a través de 'computed'
  • Uso de Vuex
  • Uso de 'refs' para acceder directamente a elementos DOM
  • Estilos aplicados solo al propio componente a través del atributo 'scoped'
  • Nuxt PWA

Y, para ser sincero, he ido metiendo cosas conforme se me han ocurrido, asi que perdon si está algo desordenado xDDD

Pendiente

El proyecto en sí no está terminado, es más, ahora mismo las imágenes que subais, solo se quedan localmente en vuestro equipo de manera temporal ( hasta que dais al F5 básicamente ).

Mi intención es ampliar el proyecto con las siguientes características:

  • Conectar la página a una API que se encargue de traer y subir las imágenes a través de axios
  • La API será un Laravel Serverless en AWS Lambda
  • Las imágenes se subiran a un bucket de S3 o Google Cloud Storage (depende de como me dé)
  • La base de datos será en Google FireStore o en DynamoDB (al 90% de probabilidad la primera)
  • Intención de meter registro de usuarios para subir imágenes a traves de AWS Cognito

Mi idea es montarlo todo en un entorno serverless para probar cosas de Amazon y de Google y he aprovechado este ejemplo para eso ( y por eso he tardado tambien algo más de lo que me gustaría xD ).

De todas formas, conforme vaya actualizando cosas lo pondré por aqui si a alguien le interesa, aunque salvo Axios para las peticiones ajax, el resto de cosas pendientes no son propiamente de NUXT, pero bueno xD

Un saludo!

6 1 respuesta
Leos
Leos #14 Jun '19

#13 me lo dejo en pendiente para verlo en profundidad cuando llegue de las vacaciones! Grande misko con estas aportaciones!!!

1 respuesta
MisKo
MisKo #15 Jun '19

#14 Tampoco hay mucho que ver eh!, casi todo es VueJS en un entorno preconfigurado (NUXT) y 4 o 5 características de este último. Como más vais a aprender es montando un proyecto sencillote como este por vuestra cuenta xD

Además, si os surge algunda duda del estilo, ponerla en el hilo y seguro que alguien os ayuda, que hay más gente tocando NUXT en el foro xD

1
9 días después
Sakerdot
Sakerdot #16 Jul '19

Buenas,

He utilizado Nuxt para desarrollar https://www.underlords-sim.com/ y https://www.tft-sim.com/, ahora mismo están desplegadas como sitios web estáticos.

Me ha encantado, había utilizado React y Vue a secas antes y el tener que configurar todo era bastante tostón, apenas he tenido que tocar ficheros de configuración para que todo funcionase como yo quería.

Le veo bastante futuro a esto, me parece muy cómodo y muy potente, te puedes centrar casi exclusivamente en la aplicación que al fin y al cabo es lo importante.

1 1 respuesta
MisKo
MisKo #17 Jul '19

#16 Justo había visto la web en el hilo de TFT xDD

Yo iba a hacer una página chorra con una idea de TFT, pero ya que tienes la web, te la doy a ti y la implementas, que no se tardará mucho y así implementas algo que no he visto en otras de TFT, además de ser super simple xDDD

Básicamente, es que tu digas que items tienes (por ejemplo, lágrima, espadon, vara, cinturon) y te diga todos los items que puedes crear con ellos y la combinación de cada uno xD

Ale, te dejo ahí la idea millonaria :D

Volviendo al hilo, yo ya uso NuxtJS para casi todo xD

1 respuesta
Sakerdot
Sakerdot #18 Jul '19

#17 Gracias por la idea! Me la apunto

1 respuesta
MisKo
MisKo #19 Jul '19

#18 No tardes mucho en implementarla, que la necesito como el comer xDDD

7 días después
ReloaD1010
ReloaD1010 #20 Jul '19

Lo estoy usando desde hace un par de meses para un micro front-end de un proyecto y es una gozada. Tenia experiencia con Angular 2/4 y sin duda me quedo con Nuxt/Vue para el proximo proyecto en el que me dejen escoger stack.

1
3 meses después
MisKo
MisKo #21 Oct '19

Vue 3 (pre-alpha)

No sabía si abrir un hilo o utilizar este y al final me he decidido por este ya que Nuxt lo implementará y aun esta en pre-alpha xD aunque se espera una versión beta para final de año y una version estable en Q1 del 2020.

Os dejo unos cuantos links con cosas que traerá Vue 3.

Github:
https://github.com//vuejs/vue-next

RFC y Ejemplos de cambios de VueJS 3
https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md

Un resumen general:
https://vueschool.io/articles/vuejs-tutorials/faster-web-applications-with-vue-3/

Otro post tambien analizando los cambios y mejoras (21 junio):
https://dev.to/stefandorresteijn/vuejs-is-dead-long-live-vuejs-1g7f

Diapositivas de resumen tambien (aunque son de nov 2018, asi que pueden estar un poco obsoletas):
https://docs.google.com/presentation/d/1yhPGyhQrJcpJI2ZFvBme3pGKaGNiLi709c37svivv0o/edit#slide=id.p

Composition API
https://github.com/LinusBorg/talks/blob/master/2019-10-04%20Vuejs%20London/New%20composition%20API%20%20-%20Vue.js%20London%202019-10-04.pdf

Un LiveCoding de VueLondon (4 octubre 2019) donde hicieron una app con la nueva Composition API (20mins de video)
La app está chula, es un piano virtual para tocarlo desde el teclado xD
https://www.youtube.com/watch?feature=youtu.be&v=JON6X6Wmteo

Como opinión personal, lo que me parece más destacable sería:

  • Detecta que características usamos de vue y solo utiliza esas para generar el bundle (bundle más pequeño)
  • Han optimizado el virtual DOM para que el rendimiento sea superior.
  • Han metido un mejor soporte con TypeScript agregando una nueva forma de organizar tu código ( Functions API )
    Standar
    Functions API

Pues nada, cuando vaya tomando forma más final y haya una beta 'estable', seguramente haré un hilo, ya que lo probare lo antes posible :D

1 1 respuesta
Leos
Leos #22 Oct '19

#21 Buenisimo aporte, cuando tenga un tiempo le echo un ojo!

1 respuesta
MisKo
MisKo #23 Oct '19

#22 Sin problema, creo que aun tendrás tiempo más que de sobra xDD

Hay mucho debate por el cambio de Standar a Functions API , pero comentaron que se seguirá dando soporte a la anterior aunque la nueva será más eficiente, pero viene todo en el RFC :D

1
23 días después
MisKo
MisKo #24 Nov '19

Los de Vue han subido las diapositivas de todas las charlas de VueToronto. (Nov 10-12, 2019)

No es lo mismo que escuchar al tio mientras te las explica, pero no están mal tampoco :P

https://vuetoronto.com/slides/

Un par de charlas son de Nuxt, pero por lo demás, el resto son cosas que, aunque son de Vue, valen sin problema para Nuxt, a sí que, darle a la que os parezca más interesante.

Por mi parte, destacaría:

  • Vue 3 and Composition API
  • Give your Vue apps the power of AI
  • Leave your legacy code behind and go Nuxt
  • GraphQL, Hasura, Apollo, and Auth0 for Vuejs developers
  • Using Nuxt with a headless CMS to automate documentation
  • End-to-End Testing Vue Apps with Cypress
4
Z
zchoudhary #25 Nov '19

Muy Buena Guia para empezar con Nuxtjs.

Los que estes interesados en React.js, similar a Nuxtjs React tiene Nextjs. Esto te permite conseguir el SSR bastante facilmente.

https://nextjs.org/

4 meses después
MisKo
MisKo #26 Mar '20

Pongo cosas que van saliendo:

Charlas de VueJS Amsterdan 2020

https://www.youtube.com/playlist?list=PLCxzy-hmQq9FnnpckFDeDtbpsUqxdheQn

NuxtJS version 2.12.0

Entre las novedades, han agregado un nuevo hook ( fetch ) que permite traer datos en SSR también en componentes ( no solo en páginas como hasta ahora )
https://nuxtjs.org/guide/release-notes
https://nuxtjs.org/api/pages-fetch

Create Nuxt APP

Tambien se ha actualizado el comando 'create-nuxt-app' para poder elegir TypeScript en vez de JavaScript en la configuración. Esto será lo primero que pruebe cuando saque un rato.

Ale, aprovechad la cuarentena si podeis :P

1
B
[Borrado] #27 Mar '20

Buen hilo.

Yo llevo trabajando con Vue cerca de año y medio y hay muchas cosas en Nuxt que encuentro muy interesantes. Pena que lo haya encontrado tarde y la aplicación del trabajo sea imposible de migrar pero en un futuro cercano voy a meterme de lleno con ello en proyectos personales.

1 mes después
MisKo
MisKo #28 Abr '20

Ya ha salido la beta de Vue 3 para quien le interese xD

Teneis una presentación aqui:
https://docs.google.com/presentation/d/1LHp-8hEtXEMSE1fd6YLAhYmtndQelQKbWlGggZKe4y8/preview#slide=id.p

Básicamente, lo que ya sabiamos, pero lo dejo puesto por aqui. Supongo que cuando salga oficialmente Vue 3, se hará algun hilo.

5 meses después
MisKo
MisKo #29 Sep '20

Pues el viernes salió oficialmente Vue 3.0, para quien le interese:

Cambios: https://github.com/vuejs/vue-next/releases/tag/v3.0.0
Docs: https://v3.vuejs.org/


En lo referente a NUXT, hay unas diapositivas de CTO explicando los cambios y la próxima version de Nuxt:
https://nuxtjs.slides.com/atinux/state-of-nuxt-2020

EDIT:
Para el que tenga el curso de Maximilian de Vue, lo ha actualizado con una sección de Vue3:

Hi Everyone!
I hope you're getting a lot out of my courses! :)
I just wanted to let you know, that Vue.js 3 was released 2 days ago!
And since I really want to offer you the best possible learning experience, I therefore also released a HUGE course update to my existing Vue course.
You can start diving into Vue 3 right now, the full course update is available for FREE since I updated the existing course in which you already are enrolled!

3 1 respuesta
Axtrix
Axtrix #30 Sep '20 Diamond hands

Espero que refactorizar proyectos de Vue2 a Vue3 no se demasiado coñazo...

1 respuesta

Usuarios habituales

Tags