@leon I don’t know but if you need a file or two in the dist directory you can configure webpack to copy it there. In my case I needed the file .realsync.

extendWebpack (cfg) {
    cfg.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        options: {
            fix: true
        }
    });
    if (cfg.output) {
        const CopyWebpackPlugin = require('copy-webpack-plugin');
        cfg.plugins.push(
            new CopyWebpackPlugin([{
                from: '.realsync',
                to: cfg.output.path
            }
            ])
        );
    }
}

Since I had q-input wrapped into a custom component anyway I have solved it this way.

Custom component file QInputA.vue

<template>
    <q-input
    :value="value"
    v-on="$listeners"
    v-bind="$attrs"
    @focus="focus"
    ref="self"
    @keyup.enter="updated"
    @blur="updated"
    @keydown.meta.83.prevent="updated"
    @input="has_changed"
    />
</template>

<script>

export default {
    props: ['value'],
    data: function () {
        return {
            changed: false
        };
    },
    methods: {
        focus: function () {
            this.$refs.self.select();
        },
        has_changed: function () {
            this.changed = true;
        },
        updated: function () {
            if (this.changed) {
                this.$emit('save');
                this.changed = false;
            }
        }
    }

};
</script>

Using it like

<template>
    <q-input-a v-model="text"/>
</template>

<script>
import QInputA from 'components/QInputA';
export default {
    name: 'SomeName',
    data: function () {
        return {
           text: 'This text is selected on focus',
        };
    }
};
</script>

@lucasfernog I see. : ). So it isn’t as trivial as I though it might be. Thank you for that!

@lucasfernog Explain please ? Did you understand the question ? Maybe I did’t explain it well …

I would like to select the text in a QInput when the field receives focus.

I can see there is a Vue Method just for that:
https://quasar-framework.org/components/input-textfield.html#Vue-Methods

I can also see that I could use this method to achieve what I want to do
https://quasar-framework.org/components/introduction-for-beginners.html#Handling-Vue-Methods

<template>
  <q-input ref="myRef" v-model="text" @focus="select"/>
</template>

<script>
export default {
  data: function () {
        return {
            text: ''
        };
    },
  methods: {
        select ($e) {
            this.$refs.myRef.select()
        },

}
</script>

What I would really like to do however is to avoid all these referencing business. Is there any way to do something like this

<template>
  <q-input v-model="text" @focus="callSelectMethodOnQInput" />
</template>

Is there anyway to reference the QInput select method within the template ?

<template>
  <q-input v-model="text" @focus="qInput.select()" />
</template>

I know it might be trivial to you : ) So forgive me for the stupid question if so. I am still new to it. Thank you for the help!

Yes ! Thank you for that link. No need for the mixins and also it is not $props I need but $attrs. Sorry it is kind of ended up to be a question about Vue rather then Quasar.

So the final wrapper QInput for me looks like this

<template>
    <q-input
    :value="value"
    v-on="$listeners"
    v-bind="$attrs"
    @keyup.enter="updated"
    @blur="updated"
    @keydown.meta.83.prevent="updated"
    />
</template>

<script>

export default {
    props: ['value'],
    methods: {
        updated: function () {
            this.$emit('save');
        }
    }
};
</script>
```

I ended up doing this in my plugin file. This makes it globally available.

// import something here
import _ from 'lodash';

// leave the export, even if you don't use it
export default ({ app, router, Vue }) => {
    window._ = _;
};

And then add

 globals: {
    'ga': true, // Google Analytics
    'cordova': true,
    '$axios': true,
    '_': true,
    '__statics': true
  },

into .eslintrc.js. So the linter doesn’t complain. One has to restart quasar dev to reload the .eslintrc.js file.

After that one can use lodash as usual just by typing _.

So …

I was reading this
https://quasar-framework.org/components/building-reusable-components.html
https://forum.quasar-framework.org/topic/696/how-to-building-components-with-quasar

But I was disappointed at this bit:
“But if we wanted to set other properties on the internal QSelect we would have to define all of them on our own component und pass them to QSelect.”
(There is a spelling mistake in there btw: und)

So I was trying to figure out if there is a way to avoid listing each and every single props.

Ended up with this.

<template>
    <q-input
    v-bind="$props"
    v-on="$listeners"
    @keyup.enter="updated()"
    @blur="updated()"
    @keydown.meta.83.prevent="updated()"
    />
</template>

<script>
import { QInput } from 'quasar';

export default {
    mixins: [QInput],
    created: function () {
        console.log(this);
    },
    methods: {
        updated () {
            console.log('updated');
        }
    },
    props: ['rows']
};
</script>

It seem to be working except that I still explicitly had to list the prop 'rows'. And when I check QInput rows is indeed not within the props.
Why is rows not within the props ?

Is there a way not to have to list all the props ? Or am I just asking for trouble doing it this way.

Thank you for the help,

@a47ae said in [How To] Building components with Quasar:

Most of Quasars components are also distributed as single file components, you can check out their source here.

Link is broken … no major just thought I mention.

@metalsadman Thank you ! I believe you but I couldn’t find it you know what it’s like. I went through the docs a couple of times already … : )
That one liner helps me a great deal and reassures me yes it is how it supposed to be done. So thanks again : )