How to use QMarkupTable component within the UMD version?

[rubymongoose]

Hello, I'm trying to figured out how to use QMarkupTable component within the UMD version of Quasar.

I saw the note for UMD developers on component page.
And after some experiments with generated UMD file from here https://quasar.dev/start/umd
and playground codepen https://codepen.quasar.dev
I couldn't make QMarkupTable work.

But then I found this https://codepen.io/smolinari/pen/vYOmdyp
where QMarkupTable works fine and in Pen Settings it use quasar.umd.min.js file.

Question is - how to make QMarkupTable work in generated UMD file from here https://quasar.dev/start/umd
or in playground codepen https://codepen.quasar.dev 🤔

[yusufkandemir]

The idea is to use <q-markup-table> somewhere other than UMD, then use the developer tools to use the generated HTML code instead.

So, for just <q-markup-table>, you would need to use the following:

<div
  class="q-markup-table q-table__container q-table__card q-table--horizontal-separator q-table--dark q-table__card--dark q-dark q-table--no-wrap"
>
  <table class="q-table">
    ...
  </table>
</div>

For `, you would need to use the following:

<div
  class="q-markup-table q-table__container q-table__card q-table--vertical-separator q-table--dark q-table__card--dark q-dark q-table--no-wrap"
>
  <table class="q-table">
    ...
  </table>
</div>

and so on.

[rstoenescu]

Exactly how Scott's example is. https://codepen.io/smolinari/pen/vYOmdyp
Put the <template> there.

The reason QMarkupTable does not works out of the box without that is that the DOM is interpreted (and auto-fixed, especially on the <table> elements) by the browser before Vue can get to it and compile it.

[yusufkandemir]

If this is the "new" recommended solution, then the warning here needs to be updated:
https://quasar.dev/vue-components/markup-table#usage

[rstoenescu]

Did it.

[rubymongoose]

Exactly how Scott's example is. https://codepen.io/smolinari/pen/vYOmdyp Put the <template> there.

The reason QMarkupTable does not works out of the box without that is that the DOM is interpreted (and auto-fixed, especially on the <table> elements) by the browser before Vue can get to it and compile it.

Thanks for the answer, but I still can't get this to work in playground https://codepen.quasar.dev
I think it's because example here https://codepen.io/smolinari/pen/vYOmdyp uses:

quasar@1.9.4/dist/quasar.min.css
vue/dist/vue.js
quasar@1.9.4/dist/quasar.umd.min.js

And current playground https://codepen.quasar.dev uses:

quasar@2/dist/quasar.prod.css
vue@3/dist/vue.global.prod.js
quasar@2/dist/quasar.umd.prod.js

In my case, table not showing and page contain this code:

<template>
	#document-fragment
</template>