Wrapping components

  • 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

  • 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.



  • 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

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

  • 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 v-slot:append>
    <q-icon :name=“isPwd ? ‘visibility_off’ : ‘visibility’” class=“cursor-pointer” @click=“isPwd = !isPwd”/>

  • The article I linked to should give you some clues. 🙂


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

Log in to reply