Development tip

Vue Designer
1

we work with ERP development, I would like a tip on which meta framework to use with vuetify,
Which option is better in this case next or vite, what do you advise in this case?

regards

Paulo Viana

2

Hi @pvsousa,

All the meta-frameworks in the Vue ecosystem are pretty good. You can use the small icon on the start-screen to know which ones SSR with SPA (or) MPA fallback (Quasar in the dual-menu will be visible in the next update).

image
image1210×322 27.1 KB

Is your ERP development a fresh project (or) you are aiming to integrate part of it with a Vue-based app?

Meta-framework

  • I personally will go with Nuxt, as I’m quite comfortable with it, but it’s best you pick what you are comfortable with & aspire to learn.

  • Quasar is another very solid option, especially if you are after cross-platform apps (web, desktop, hybrid ios/android) from a single code-base. It comes with a in-built component library to provide a 360 degree coverage in all aspects.

  • I will go with Iles or Astro only for content-rich static sites that contains sprinkles of interaction. Nuxt still excels even for static sites as well. The only difference is Nuxt is SPA, while Iles & Astro gives you MPA.

  • Vite - You can of course wire everything with Vite plugins, and achieve all the features usually covered by meta-framework, but it will be a lot of work.

Component Library (generally not applicable if you choose Quasar)

  • Going with one of the key component libraries like Vuetify is a good idea, though crafting your own components are always recommended. Shadcn-vue has amazing set of accessible components based on radix-vue (both ported from react). It’s not a component library, rather ready-to-use components that you simply copy into your project, and customize them as per your need.

  • With Vuetify, remember it’s very much sass-based, and doesn’t play nice with tailwindcss out-of-the-box. Moreover, they don’t have an official Nuxt support, and don’t aspire to in the future as well (as per it’s author’s note in the last few conferences)

  • If you are still shopping beyond Vuetify, I will suggest looking into PrimeVue. They are long running, pretty solid, have really extensible components. In fact, they were silver sponsors of the last few Vue conferences, and have a great team. First-class Nuxt & Tailwind support is their key highlight. Check here - https://tailwind.primevue.org/

Backend - Nuxt is a full-stack framework, which means you can author your backend with server routes in the same project (check server folder in our happy-paws project). But, you can go with any backend. Laravel+Vue+Inertiajs is a well-established and widely used flavour. Ohh yeah, and then there are headless cms like storyblok etc, and Baas like supabase & firebase.

Note, the above are simply some suggestions. Obviously, you will know better about your needs, and what best suits your tech stack. All the best, and lets keep the convo going :slight_smile:

1 Like
3

thanks for the feedback,
I will follow your tips.

Just one question, the QUASAR option doesn’t appear here in my IDE, did you do anything to add it or is it some different version?

here 1.31

4

We have a desktop system with > 600 tables, I want to take advantage of the existing backend structure to speed up the process, my knowledge of VUE is very basic, I’ve had the tool since launch, I acquired it with the aim of making it our generation source of web applications, thanks for the support

I’m in Brazil

5

That screenshot was from my dev environment. Quasar should be listed when the next Vue Designer update is out. Being listed in the start screen, basically provides a generic way to scaffold from our github starter templates (and any sample apps), which you can access directly for now.

image
image1010×983 124 KB

6

Very interesting app you have got. So, what tech-stack is your current desktop app built with?

I will recommend Nuxt+Electron, or Quasar (it already uses electron underneath for its desktop apps).

To see Quasar’s desktop app in action, try the Quasar Weather app (link in the previous reply). With quasar, running for different platforms is generally a command away.

Note, when working on Quasar projects with Vue Designer, we generally use npm run dev & work on SPA mode, and run another command in parallel (desktop/mobile) via a second terminal to test it outside Vue Designer.

npm run dev # Web - SPA
npm run dev:ssr # Web - SSR SPA
npm run dev:electron # Desktop
npm run dev:ios # Mobile - ios
npm run dev:android # Mobile - android

image
image1920×1415 91.4 KB

1 Like
7

I currently use a French ide - windev,
It has development for 3 environments (desktop/mobile/web), however the frontend in terms of web leaves a lot to be desired in all aspects.
Thank you for all the answers above, it will help me a lot

1 Like