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.

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

    Scott



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



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

    Scott



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


Log in to reply