search

buggregator / frontend

Buggregator UI
https://buggregator.dev/
15 stars 7 forks source link

Nuxt to Vue Frontend migration #57

Open Kreezag opened 1 year ago

Kreezag commented 1 year ago

Need to migrate Nuxt to Vue 3 to reduce bundle size, simplify request logic and extend flexibility

binaryfire commented 11 months ago

Hi @Kreezag. Hope it's ok to ask a non-Buggregator question :) We're working on a website builder and our team is trying to decide if we should migrate from Vue 3 to Nuxt. It's a pure SPA with a separate backend.

Many people say to use Nuxt for everything but I don't see many benefits for complex SPAs that don't need SEO. Would you mind sharing some more detail about why you're switching to back to vanilla Vue 3? I'm also worried about flexibility. For example, we use a modular folder structure and use Vite's MPA feature to create multiple builds from the same repo. It seems those kind of things would be harder with Nuxt.

Kreezag commented 10 months ago

Hi @binaryfire ! Nuxtjs was pretty good to start. The very first version of this tool was on the laravel and nuxt was a great step to split front-end and back-end. During working on project we've been found lot of limitation. First version of nuxt app was with the nuxt server. It worked good but docket size was pretty big and requested lot of memory so we decided to use static of nuxt. So on this part we lost all benefits of nuxt but getting a difficulties.

  1. The main limitation today is a router. We want to use asynchronous routes and build only necessary pages configured on the environment level. Nuxt here pretty strict and have no simple way to configure router. Also we have to use the route app.com/#/page instead of app.com/page with this limitation
  2. Comparability with libraries. We start using storybook and have got a limitation that storybook didn't render components if we use nuxt plugins calls inside. In storybook v7 it fixed.
  3. If you want to use nuxt for build static files you should use Composition API because options api required to use lot of boilerplate with 'process.client' conditions.
  4. File structure. Nuxt has pretty strict layout and page structure so we need to use workarounds as layout dynamic change: https://nuxt.com/docs/guide/directory-structure/layouts#changing-the-layout-dynamically I prefers composition more than nesting so I want to be able to configure pages on my own) I love FSD structure as entity based files structure (approximately domain driven design on the front-end) and I can't use it out of box with Nuxt.
  5. We don't have simple way to use fetching within components. We have to use JS fetch inside plugins instead of nuxt fetching to keep compatibility with storybook. Nuxt has his own fetch boilerplate but it didn't have enough flexibility we need. I'm sure it isn't all my pain but I hope it is helpful.
binaryfire commented 10 months ago

Thanks @Kreezag, that's very helpful! It's great to get some real feedback on these issues. I guess I’ll be sticking with Vue 3 :)

PS. You might be interested in Anthony Fu's "Vitesse Lite" starter template: https://github.com/antfu/vitesse-lite. It's a good Vue 3 skeleton.