I'm struggling with upgrading Vue + Quasar with webpack. Does someone have Advice, am I on the 'right track' with upgrading?

[nkamp]

I've 'earned' the application last year. The project has been started I believe in 2019. I have on this forum already started two other discussions, without succes unfortunately. I have been struggling further and try it again.

Current situation:

Node.Js: V16.20.2
npm: 8.17.0
Vue: 3.2.0
Quasar: 2.11.10
Webpack: 4.46.0
vue-cli-service

I suppose that the project at that time was build with '@vue/cli'. The program is started with "npm run vue-cli-service serve"

What I try todo upgrading Node.js + dependencies (LCM work):

I've the dependencies upgraded (-I think these are the most imortant ones):
Node.Js: V22.21.0
npm: 10.9.4
Vue: 3.5.25
Quasar: 2.18.6
Webpack: 5.103.0

I read on the quasar site, that 'vue\cli' will not be maintained anymore. So as suggested on the quasar site, I have installed 'quasar\cli'.
(I'm also looking around on the quasar site 'Getting started - playground - quasar upgrade - quasar cli etc.')

The issue's I have now:

in the 'Inspector' of the browser console I see, after the upgrade, at the class element:
<q-header id="app" class="test-env text-white" .... />...
In stead off:

....

1. every HTML tag is the "q-" added to the HTML tag and not just rendered to <header class="..." ...>
2. As said the class css part "q-header q-layout__section--marginal fixed-top" are not added to the HTML tag

This means quasar is not right registered and\or mounted? (or how or how do you call it?)

Asking for advice how to go further?

What I have done now is create a new quasar project. With 'quasar dev' I can start this quasar project.
I try now to 'merge' my Vue application into this new quasar project.

The reason that I do this:

• Have the 'new' 'quasar.conf.js, tsconfig.json
• The directory structure is right for a quasar project.
• There is an index.html with ''

The question:

• Can someone give me some advice, am I on the right track? Do I have to further with quasar\cli? (quasar dev).
• If I'm on the right track, at this moment the 'old' quasar.config.ts mounted by main.ts. But in the new quasar project I don't have a main.ts? Do I have to keep this main.ts?
• Also all components are 'mounted' (fetched) in main.ts. If I don't have anymore main.ts, how are the components loaded?
• Is it anyway a good strategy? (I mean to 'merge' my application into new vue\quasar application)
• OR SHOULD I STAY WITH VUE/CLI AND START THE APPLICATION WITH "npm run vue-cli-service serve"?

I hope someone can give me some advice because I don't know if I've taken the right turn and I also feel like I'm stuck.

[yusufkandemir]

I'd say you are on the right track. Since Vue CLI is not maintained, it would be harder to try migrating all the files into something else, compared to only moving your source files to another new project.

Answers to your questions:

1. Yes, I'd say you are on the right track. Quasar CLI is a good choice. Migrate to Quasar CLI with Webpack instead of Vite to make it manageable. Otherwise, you will also have to deal with Webpack and Vite differences. You can still migrate to Vite after you finish the current migration.
2. Most parts of main.ts is managed for you by Quasar CLI under the hood. If you have custom logic like adding a Vue library with app.use and such, you will need to create boot files for it and move your logic there. https://quasar.dev/quasar-cli-webpack/boot-files
3. Same as the previous point, you can use a boot file for that.
4. Yes. Just move the source code onto a fresh project, then make adjustments to config files
5. You will never be up to date that way. You will have to migrate to something else, and Quasar CLI with Webpack is a good choice in your situation.

[nkamp]

Hi Yusufkandemir,

Thanks for you're answer. But today I have fixed it!!
I was not aware of the dependency "vue-cli-plugin-quasar". I have this dependency. Than I had problem with import 'QuasarTable'( sorry I don't exactly the name now, I'm not behind my working laptop). Everywhere this type is used, i have changed into import type { QuasarTable } from "quasar";. This is an interface and type which is used at compile-time. The function useQuasar() is an 'regular' import: import { useQuasar } from "quasar";

Now are the quasar components imported and rendered.
I have 'discovered' that I have an vue/cli application earned with quasar as dependency.

So now I'm running into other kind of issue's, which I have to solve step-by-step, like today the 'pdfGenerator' is not working at the moment.
I will now fix this and than follow this .
Than I can replace Vue, Webpack and maybe more...