Quasar: [vue-cli-plugin] Vue Router nested route not working with Vue Class Component

[mockingjet]

Describe the bug
Vue Router Nested Route doesn't work with Vue Class Compoent in Quasar Project

Codepen/jsFiddle/Codesandbox (required)
https://github.com/nothinghappens/quasar-test

To Reproduce
Steps to reproduce the behavior:

1. yarn
2. yarn serve
3. go to http://localhost:8080/users/profile
4. See error: unknown custom element router-view
5. if you remove quasar component ( in this case, remove q-btn ) or not use vue class component, then you can see the profile component.

Expected behavior
Should see profile component in /users/profile

Screenshots
If using quasar component, missing my profile component

If not using

Platform (please complete the following information):
OS:Windows and Linux both fail
Node: 12.8
NPM: 6.10.2
Yarn: 1.22.0
Browsers: Chrome
iOS:
Android:
Electron:

Additional context
Vue Class Component is an official library, please help fix the bug, thanks !

[outofmemoryagain]

Current workaround is to use manual import strategy. In this case the issue is reported when using the Vue CLI plugin. Additional testing will need to be done to verify if it is reproducible in Quasar CLI.

In vue cli projects change
vue.conf.js:

const baseConfig = {
  publicPath: "/",
  pluginOptions: {
    quasar: {
      importStrategy: "manual",
      rtlSupport: false
    }
  },
  transpileDependencies: ["quasar"]
};

and quasar.js to

import Vue from 'vue'

import './styles/quasar.scss'
import 'quasar/dist/quasar.ie.polyfills'
import '@quasar/extras/material-icons/material-icons.css'
import { Quasar, QBtn } from 'quasar'

Vue.use(Quasar, {
  config: {},
  components: { QBtn },// { /* not needed if importStrategy is not 'manual' */ },
  directives: { /* not needed if importStrategy is not 'manual' */ },
  plugins: {
  },
})

[IlCallo]

Seems like auto-import won't work for TS codebases, in some cases, because the webpack loader managing it hasn't been adapted yet.

Fallback to manual imports for now, we'll work on it :)

[mockingjet]

Also, if I use auto import and use any quasar components related to transition effects.
My own custom transition component emits error too.
So, it's not only the routing issue here.
Hope you can fix this at a time!

[IlCallo]

Related to https://github.com/quasarframework/quasar/issues/6240
Gonna see if I can fix that one and this will be fixed as well

[IlCallo]

The problem here lies on vue-plugin-quasar webpack loader.

When using Class API the prototype of component.options.components contains a reference to RouterLink and RouterView.

Currently we add this code to auto-register Quasar components:

component.options.components = Object.assign({${comp}}, component.options.components || {})

which changes component.options.components prototype, losing the customizations added by Class API decorator.

When not using Class API, these references are probably stored somewhere else, even if I could not find where exactly: they are registered via Vue.component() here, but I could not find it where Vue.component() actually leads in Vue codebase...

On the other hand, component.options.components will be undefined when Class API isn't used and no child component is registered.

I think here is where vue-class-component messes up with the prototype, I think it's near line 77, which seems to forward some calls to Vue prototype.

We could emit

component.options.components = Object.assign(component.options.components || {}, {${comp}})

instead of current assignment: it will preserve Class API stuff, but still assign a value if component.options.components is undefined.

It's probably safer to do it also for directives registration, in case Class API is messing with them too

[rstoenescu]

vue-cli-plugin-quasar v2.0.1 released with the fix.