Wrapping components

[Cosby]

Good evening all
Is there an “idiomatic” way to wrap a standard component (ie. Qinput) in a custom component adding functionalities?
In my scenario I would like to add automatic translation of component

Thank you all for the support

[s.molinari]

What do you mean by “automatic translation of the component”? Can you expand on that please?

In the mean time, you can read this too.

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

Scott

[Cosby]

My final goal is to avoid to call the $ t () function every time a label is present. We are developing a very big application and we cannot remember every time the $ t function. So I would like to implement something for this goal. Maybe you have a smarter approach to suggest me. I was thinking something like: I create my own component that wraps the original one and inside I make all the required translations. It is not the best (I would like to avoid to wrap all components we use) but I don’t find any alternative way.

Your thoughts?

Thank you

[metalsadman]

@Cosby wrapping is a good the way to go, if you are going to re-use this component n times throughout your app.

[Cosby]

Yes i’ll use them many time. Can you point me on how to wrap a qinput for supporting something like:

<q-input outlined v-model=“password” :label="$t(‘Password’)" :type=“isPwd ? ‘password’ : ‘text’” @keyup.enter=“doLogin()”>
<template v-slot:prepend>
<q-icon name=“fas fa-key” />
</template>
<template v-slot:append>
<q-icon :name=“isPwd ? ‘visibility_off’ : ‘visibility’” class=“cursor-pointer” @click=“isPwd = !isPwd”/>
</template>
</q-input>

[s.molinari]

The article I linked to should give you some clues.

Scott

[Cosby]

Thank you. I’ll have a look and let you know