Migrate project Vue3 to Quasar...

[roylans]

Hello guys

Our company has a project built with Vue 3, but we need to start migrating this project to Quasar, then I have some doubts:

• Is it possible to have two projects (the actual Vue3 project and the new project with Quasar) in the same folder/project
• There are some good strategies for this type of migration?
• Initially, we must migrate only the login and reset password pages to Quasar and the rest of the project with Vue, as is now.

Anything idea is welcome...

Thank you in advance...

[yusufkandemir]

Hello

If you have a Vite project with the Vue plugin, then I would suggest adding Quasar to your project by using Vite plugin for Quasar.
If you have a Vue CLI project (it's in maintenance mode, btw), you can use the Vue CLI Quasar Plugin.
If you don't have a build process, or have a custom one, then you can integrate Quasar with the UMD approach.

Eventually, after you complete migrating the UI over, you may consider if you want to use Quasar CLI (with Vite or Webpack) for its extra benefits. If you decide to go that way, you will only have to make file/config reorganizations at that point. The easiest/clearest way is usually to scaffold a new CLI project, then copy over the Vue/js/ts/etc. files from the other project, but it's not necessarily required.

However, if your project doesn't have a convoluted build step and you want to invest in Quasar, you can go the CLI way directly. You can create a new Quasar CLI project, copy your files over, make small changes, and call it a day. Your Vue 3 files that are not using Quasar components will still work. You can progressively convert them to use Quasar components/directives/plugins/utils.

Good luck with the migration!

[jayatulsiani]

what if i want to move the current Vue CLI project to (Quasar + Vite)?

[yusufkandemir]

Since Vue CLI uses Webpack, it might be easier if you migrate to Quasar CLI with Webpack first. This way, you wouldn't also deal with converting the Webpack stuff to Vite stuff at first. But, if you don't have a lot of Webpack plugins or configurations, then you can directly go for Quasar CLI with Vite. Either way, you would create a Quasar CLI project, copy your files, and make the necessary changes.

[roylans]

Woow, excellent answer!!! I need time to digest all the options.... but, I think that the best option is the last, go the CLI way directly...

Thank you, very much

[roylans]

Hi @yusufkandemir

we have finally chosen Vite Plugin for Quasar and all tests for migrations are very good except that we have a conflict with the CSS of another library: PrimeVue and to do that the components of quasar do not render ok.

Is it possible to exclude this import in quasar layout/page/components?

Do you have any recommendations about how to deal with this type of conflict?

main.ts

...
...

// Styles for  PrimeVue
import '@/assets/styles.scss'

import App from './App.vue'
import router from './router/index'
const app = createApp(App)

Thanks in advance....