NuxtJS - The Vue.js Framework

B

.

1 respuesta
MisKo

#61 Como mencionaba en el post anterior, tengo pendiente usarlo y probar alguna integración con Vue3.

Lo que me interesa es sobretodo poder conseguir algo como lo que hace nuxtjs con "npm run generate", pero solo he visto alguna página por encima de Vite y desconozco si puede hacerlo xD

EDIT: Acabo de montar uno por curiosidad y la verdad que el server se inicia bastante rapido xD

Cambiar info (lo hago desde el menu, pq si pulso control+s no sabeis cuando le doy y cuando se actualiza xD)

Y la estructura que crea (el dist es porque he compilado lo que traia xD)
npx create-vite-app name

@KazuluDev te menciono que he actualizado contenido :P

1 respuesta
B

.

MisKo

Pues justo hoy tengo que montar un proyecto nuevo, así que igual lo hago con Vite xDDDDDDDDDD

1 respuesta
B

.

1 respuesta
MisKo

#65 Ya estaba la beta no?, vamos a mi me suena probar la beta de la v2 en las pruebas de arriba y no ha pasado apenas tiempo, así que será lo mismo xD

1 respuesta
B

.

1 respuesta
MisKo

#67 Al final no me atreví a hacer el proyecto nuevo con Vite, utilizo varias cosas de NuxtJS que me solucionan la vida (como layouts, transiciones entre rutas, SSG) y no me apetecía investigar para hacer esto con Vite xD

Ya lo haré con más tiempo

7 días después
MisKo

Recordaros que este finde está esto:

Charlas

Entre el 25 y el 27 de febrero, se hacen un par de charlas anuales de Vue que podeis ver de manera gratuita:

Vue Contributor Day:
https://www.vuemeetup.com/#/vue-contributor-days-february-2021
Fue ayer: 16:30 - 19:30 (FAIL)

Vue Amsterdam: https://vuejs.amsterdam/
Desde hoy a las 12:00 hasta mañana a esa hora creo, son 24h seguidas xDDDDD

1 respuesta
B

.

1 respuesta
MisKo

#70 Si, lo de 24h seguidas ni idea, igual el año pasado fue igual pero a saber.

Voy a ver si veo los temas de las charlas y pongo por aqui las que más me llamen la atención xD

EDIT: la de Vue Contributor day fue ayer, pero aun no están subidos los videos :(

EDIT2: No se ni en que día vivo, la de Vue Amsterdan empieza de hoy a mañana, en 45 mins xDDDDDD

MisKo

VUE AMSTERDAM

Os dejo por aqui las que creo que serán más interesantes. Mención máxima a las de NuxtJS por ser motivo del thread y Vite por ser lo último tratado xD

HOY

13:00 - 13:30 | Spin the wheel: building a truly reusable composable
13:30 - 14:02 | A sneak peak into the future headless eCommerce
14:02 - 14:32 | Tips & Tricks for your Vue 3 applications
14:32 - 15:04 | Vue 3 and Typescript
15:47 - 16:32 | State of Nuxt3 **
16:32 - 17:04 | Nuxt3 in Action **
17:04 - 17:29 | Edge-rendering with Nuxt **

21:52 - 22:24 | Introduction to Vue 3's Composition API

Mañana SABADO

09:31 - 10:03 | How Vite Changes the Game for Vue and Web development **
10:03 - 10:26 | Nuxt Performances **
10:26 - 10:56 | How we are optimizing Nuxt without removing features in VueStorefront **

MTX_Anubis

No uso Nuxt porque soy demasiado opinionated al respecto aunque viendolo tiene algunas cosas chulas pero bueno, me gusta más la propuesta de Glovo sobre apps de Vue y es la que he ido adoptando.

Al final como comenté en algún post del que nadie se acordará, empecé el side project en Vue 3 y la verdad es que le voy cogiendo el gusto. No le puedo dedicar mucho tiempo pero me está gustando la Composition Api y los cambios que han ido haciendo, para mi las principales en tu día a día:
La unificación del v-model, no más .sync
La propagación de enventos de childs a parents al pasar los $listeners como atributos.

Luego otras como poder tener varios roots en el componente, haber añadido teleport, poder montar varias apps lo cual podría venir bien para distinguir las UIs por roles o features por ejemplo. No lo he mirado pero imagino que no es algo que ya no se pudiera hacer via componentes, de hecho la propuesta de Glovo va encaminada a hace eso (cada modulo es una app que puede o no depender de otro modulo)

Vamos lo han hecho mucho más modular y para mi es un win.

1 respuesta
MisKo

#73 Y porque no usas NuxtJS ? Todas las opiniones son bienvenidas :D

A mi me facilita el trabajo al día, pero la verdad que no estoy contento con lo que están tardando en adaptar Vue3 a NuxtJS la verdad.

1 respuesta
MTX_Anubis

#74 Es que con Vue3 se han cargado muchas cosas que estarían hasta en la sopa en cualquier librería medio grande. Con Vuetify ocurre lo mismo, van a tardar en poder adaptarlo.

El por qué no lo uso es basicamente, la composición de rutas que hace y el dividir pages/components me parece horrible, hice una prueba rapida (un par de días) y no me gustó. Como digo he adoptado la propuesta por Glovo y es totalmente incompatible con Nuxt xD

https://medium.com/glovo-engineering/how-to-structure-your-vue-project-for-the-long-term-657817a2a002

Vamos la tomé como referencia, al final los módulos son algo parecido a plugins y pueden o no depender de otros. Tengo un módulo que es core que instala plugins de vue y alguna cosas más, luego se le van instalando otros modulos. Tengo un modulo que define componentes basicos de ui, otro layouts, otro para el auth y así. Mi idea principal de esto es poder deshabilitar modulos aunque no me he puesto a trabajar en ello porque voy lento y sé que es algo más fácil de decir que de hacer.

Pero vamos que lo que más estoy haciendo es experimentar mientras hago algo, es una de las razones por las que me daba mucha perece a ponerme aprender algo nuevo.

Al final es obvio que mucho de eso lo puedes hacer mediante estructura de carpetas como hace Nuxt así que a cada uno lo que le guste :P

1 respuesta
MisKo

#75 Lo de las rutas es un poco "opcional", por defecto te pone lo de el directorio páginas, pero no significa que no puedas poner las tuyas como en Vue3 (es más, es obligado cuando tienes rutas complejas y params en ellas)

Por ejemplo:
https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router

Lo del directorio, pues si, es cuestión de gustos xD aunque básicamente lo hacen para detectar y autoimportar componentes (lo cual te ahorra todos los imports, require, etc..)

De todas formas, siempre está bien escuchar otras opciones, yo lo de tener distintos módulos separados e importar uno u otro en cada sitio no lo he probado a gran escala, pero a "menor" escala si lo probé, y la verdad que para hacer eso (generar web components), prefiero svelte: https://svelte.dev/

Lo dicho, cuestión de gustos ajajaja

1 respuesta
MTX_Anubis

#76 El tema no es tanto importar módulos para usarlos en otros sitios sino features completas y habilitarlas/deshabilitarlas en tu app. Reciben el core, instalan rutas con las vistas, los middlewares que quieres etc. y se queda agrupado ahí. Si vas más allá puedes hacerte layouts dependiendo de qué está habilitado y qué no para apps más complejas y evitar los if/else en vistas que les tengo mucha tirria. Por eso digo que es algo más parecido a plugins.

No he probado svelte y no lo voy a hacer, como digo no quiero probar nada nuevo xD

1 respuesta
MisKo

#77 Pues no estaría mal que explicaras como estás haciendo eso con Vue3 ( o como lo planteas ), con algun ejemplo sencillote en un github o algo asi. A mi me mola lo que dices y ahora mismo no sabría como plantearlo.

Lo de Svelte me refería más a webcomponents del tipo:

  • Me hago mi calendario con toda su funcionalidad (la que se me ocurra, incluyendo por ejemplo tareas o a saber)
  • Exporto asignandole la etiqueta <MiskoCalendar>
  • Donde lo quiera usar, simplemente cargo su bundle.js y ya tengo habilitado <MiskoCalendar> (no es necesario que sea svelte, puede ser html básico, react, vue, angular...)

Para esto, svelte lo lleva de base, con una etiqueta en la config de rollup, ya te lo exporta así (customElement lo llaman, si no me equivoco)

1 respuesta
MTX_Anubis

#78 Si, se lo que te referías con Svelte. Como digo este side project estoy experimentando más que otra cosa y no quiero añadir más cosas nuevas que no he usado nunca.

Sobre lo otro te quoteo lo que he dicho antes xD

Mi idea principal de esto es poder deshabilitar modulos aunque no me he puesto a trabajar en ello porque voy lento y sé que es algo más fácil de decir que de hacer.

La estructura es basicamente la que he puesto antes de Glovo con algún cambio:

  • Un wrapper para el router para poder registrar middlewares
  • He añadido un core que es la App (no la de vue, si no tu web app) que inicializa router, i18n, vuex, etc. Además aquí puedes añadir modulos que sea core (web components, layouts, etc) que van a ser usados por el resto.
  • En el main creas la app, registras el resto de modules y la montas:
spoiler

Cada modulo instala las rutas o stores que necesita. Si quiere meter componentes globales también puede. Hay cosas a tener en cuenta: Dependencias entre modulos (si tienes uno que depende del store de users, de session, etc), order de los middlewares de las rutas, etc. Lo ideal es que fueran lo más independiente posibles cosa practicamente imposible con algunos (sessions y users por ejemplo) porque son transversales (serían core). Pero si quieres añadir un chat sí podría ser independiente, podrías ir más allá, añadir atributos como navigable en las opciones del modulo y hacer algo genérico para que se mostrara en el menú los componentes navegables pero esto es una idea vaga y no me he puesto con ello.

De momento lo tengo así y no lo he tocado más, como te digo no es algo que no se pueda hacer con una estructura de carpetas y de hecho hacer esto en proyectos que no vayan a crecer mucho es un overkill porque no es necesario. Hasta que no avance más en el proyecto y tenga una idea clara de lo que necesito y quiero poder hacer, no tengo intención de tocar más esta parte.

MisKo

Os dejo por aqui las diapositivas que he encontrado de lo de Vue Amsterdam:

State of Nuxtjs {2,3}
https://docs.google.com/presentation/d/1cWxCe9IZVRzM2W4OqvA4PtBr9_GLcF3n7VJEUoBLjg8/edit#slide=id.p

Nuxt Performances
https://noti.st/debbie/5DYjVv/nuxt-performances

Edge Rendering with Nuxtjs (NITRO)
https://docs.google.com/presentation/d/137PNjV93KWAb7yrftSt-oDb2pVYbAJhv7IxTfW70Tzc/edit#slide=id.p

NuxtJS 3 in action
https://nuxtjs.slides.com/atinux/nuxt-3-in-action

2
1 mes después
VonRundstedt

Por curiosidad como estructuráis el styling? Creáis un css/sass nuevo para cada componente? O usais style tag con scoped para cada componente? O esto último se considera mala praxis? o una mezcla de ambos dependiendo de lo "específico" que sea cada componente?

1 respuesta
B

.

1
MisKo

Si es compartido en varios sitios -> CSS
Si no es compartido -> Scoped

1
2 meses después
Simba26

#8 Le he dado un vistazo a tu web y me gusta bastante y ademas el enfoque que tiene. Proximamente hare un proyecto que necesitará internalizacion, que herramienta usaste?? nuxt/i18n?? Lo de posicionar en el SEO veo que funciona bien, de hecho lo busque y aparece de primero en google.

Para el despliegue donde recomiendas calidad/precio? La web tendra muy poco contenido estatico ya que es una herramienta interna para una empresa que contendrá chat, salas, grupos, etc consumiendo un api rest y websockets.

1 respuesta
guito

#84 Modifiqué nuxt i18n para poder usar subdominios y poder hacer nuxt generate, que hace que la web sea más rápida. Es verdad que hace tiempo que no miro como está el plugin ni las novedades de nuxt, puede que ya esté más optimizado. Sobre el SEO también tienes que tener en cuenta que no es solo por la web... hay que invertir mucho dinero para estar arriba en ciertas palabras clave.

Sobre el despliegue, para el front a mi Firebase me parece lo mejor: prácticamente gratuito y directamente tienes el CDN de google.

edit: estoy mirando y primer post sobre multi dominio en nuxt18n lo cree yo: https://github.com/nuxt-community/i18n-module/issues/19

1 respuesta
Simba26

#85 Te felicito por ese aporte a la comunidad, que seguro que lo utilizare para este proyecto y los proximos. Mirare firebase a ver que tal esta porque igual me compensa un VPS porque tendre un back-end que desplegar tambien que lo mas seguro es que sea en Go.

Lo del SEO te guiaste por alguna documentación en internet o sabes de algo donde pueda leer al respecto? me importa bastante ya que pronto espero sacar un proyecto personal a produccion y es necesario un buen posicionamiento, se que necesitas trafico para mantener tu posicion en la indexacion de google me mirare alguna forma de enviarle trafico tambien.

1
guito

Yo tengo las 2 cosas: backend con cloud compute y front con firebase. La única pega que tengo es que tengo que tenerlos en dominios distintos. Firebase tenía las cloud functions para poder hacer un proxy al dominio que quieres, pero era muy lento, así que seguimos con el dominio distinto y eso hace que haya que tener cuidado con temas de CORS.

El SEO he usado muchas webs para mejorar la puntuacion, pero que yo sepa eso solo te mejora un poco el posicionamiento... Te suelen recomendar que crees contenido interesante (con un blog por ejemplo), pero creo que lo que funciona es contratar una empresa o autonomo que te genere links mensuales.

12 días después
MisKo

Holaquetal

Ha ido evolucionando ultimamente el tema de Nuxtjs por lo que os dejo por aqui cosillas que he ido encotrando en twitter:

Diapositivas de cambios de Nuxt 3
https://nuxt.slides.com/atinux/nuxt-3-in-action

Vídeo DEMO con Nuxt 3 en acción:

Tambien han abierto una preview del nuevo diseño de la página de Nuxt
Usuario: nuxt
Password: nuxt
https://preview.nuxtjs.org/

Y en esta web, también pusieron esto:

Así que todo indica que, en agosto, volveré a escribir ;)

1
1 mes después
MisKo

https://nuxtjs.org/v3

2 2 respuestas
B

.

1 1 respuesta

Usuarios habituales