How can I copy template source code about quasar components?

[Younghun Jung]

I want to customize components from quasar framework.
In Mixin section in Building Reusable Components with Quasar by document, there are some texts.

we would end up with a component that has all the internal methods, properties and data from QSelect, but no template at all. So we would have to get to the source of QSelect and copy the whole template definition. This would work up until QSelect gets updated and you forget to update the template as well. Even if you only update minor versions, it could still break, because you are not relying on the external interface of QSelect, which is described in the docs, nor the internal code, which normally one should never have to care about.

So, How can I copy template source from Quasar Framework?
I have checked directory which is ‘node_modules/quasar-framework/src/components’ and found source related in template. but this source is composed of ‘render’ function. Can I get template source including html elements?(like below)

<template>
 <q-item class="q-item-link relative-position" v-ripple @click="toggle() || goToPage()">
        <q-item-main :label="$t(item.name)"/>
        <q-item-tile
        @click.stop="toggle()"
        icon="keyboard_arrow_down"
        class="transition-generic"
        :class="{'rotate-180': item.expanded}"
        ></q-item-tile>
      </q-item>
      <q-slide-transition>
        <div v-show="item.expanded">
          <div class="q-collapsible-sub-item relative-position indent">
       ...
</template>

[s.molinari]

As you’ve noticed, Quasar’s components are built with render functions, which means, there are no templates to copy.

What is it you want to create?

Scott

[Younghun Jung]

Thanks for your answer.

I just want to create custom component with mixin using quasar component.(ex. QSelect)
And, I wonder how can I customize template of q-component, because mixin includes only functions which mean life cycle or methods, etc…

So, If I want to customize template, Do I need to handle render functions in quasar component source code?

[s.molinari]

There is no QSelect mixin. Have a look at this article. Maybe it might help you understand how to create your own components with Quasar’s components.

https://medium.com/quasar-framework/component-building-with-quasar-fc101b6730ae

Scott

[Younghun Jung]

Thanks for your help.
I think that we can use QSelect component as mixin.

building-reusable-components

From this texts, We can use quasar component as mixin like below.
(Please see #mixin part)

import { QSelect } from 'quasar'

export default {
  mixin: [QSelect]
}

In this way, I cannot handle template of QSelect. So We need to copy source of QSelect and use it as template. So, I asked where can I get template source of quasar components.

[s.molinari]

Yes, you could do that, but as the rest of the docs says, it’s not a good practice.

So we would have to get to the source of QSelect and copy the whole template definition. This would work up until QSelect gets updated and you forget to update the template as well. Even if you only update minor versions, it could still break, because you are not relying on the external interface of QSelect, which is described in the docs, nor the internal code, which normally one should never have to care about.

In fact, that part of the docs seem outdated, as I’ve noted earlier, there is no template code in the QSelect. There might have been in very early versions of Quasar, but for performance reasons, it’s better to use render functions directly.

Scott

[s.molinari]

And if I can ask once more, what is it you want to accomplish? Maybe we can concentrate on your problem and together find a solution, instead of trying to help you with what you think is the solution?

Scott