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.