@Dobromir Good point! Ok here goes, and maybe this can serve as a time for some QA on what I’ve done to. Happy for improvement suggestions 
Problem
I want to create a custom, re-usable component that follows Vue.js conventions as well as Quasar conventions, where they apply.
To add context, many online forums, articles & posts at the time of this post’s writing focus on use if the template property within a component definition, which has caused a runtime error unless set up correctly.
Solution
Parent component
<template><!-- use of tag-based templating within this parent component -->
<div><!-- single root node, required -->
<h1>A Route View</h1>
<h2>Here is a custom component:</h2>
<!--
this component differs from the basic input component provided by
Vue.js and Quasar in that it will contain a button which can be used to
auto-populate the input value with the return value of supplied function.
for this example, i have not implemented the supplied function part.
-->
<child-component
label="My Label"
componentclasses="floating-label"
inputclasses="full-width"
></child-component>
</div>
</template>
<script>
// import our custom component to use within this component
import ChildComponent from '../ChildComponent'
export default {
name: 'ParentComponent',
// be sure to list our custom component here, i've used kebab-case here as
// the name to be used in the above <template> definition. ComponentCamelCase
// is used for the actual component definition
components: {
'child-component': ChildComponent
}
}
</script>
Child component
<template><!-- use of tag-based templating within this child component -->
<div :class="componentclasses">
<input :required="required" :class="inputclasses" v-model="model" :disabled="disable">
<label v-show="label">{{label}}</label>
<a @click="generateValue()" class="icon icon-generate"></a>
</div>
</template>
<script>
export default {
methods: {
/**
* Given a generator function, this component's inputValue is set
* to the return value of the generator.
*
* @param Function
**/
generateValue: function (generator) {
// set this component's value prop as result of supplied generator function
return
}
},
props: {
'value': String,
'required': Boolean,
'disable': Boolean,
'label': String,
'inputclasses': String,
'componentclasses': String
},
computed: {
model: {
get () {
return this.value
},
set (value) {
this.$emit('input', value)
}
}
}
}
</script>
<style>
.icon-generate {
float:right;
width:16px;
height:16px;
border:1px dashed red;
}
</style>
Recap
Counter to tutorials & posts I’ve read through, no template property on ChildComponent is used, instead tag-based templating combined with component names & importing are used.
My original post asked about installing components in some official way, as with Quasar components via quasar/src/install.js, but nothing was needed.
Screenshot
Final note
If anyone can offer suggestions around that ChildComponent being able to accept a per-instance generator function into it’s generateValue method - your help would be much appreciated.
To illustrate my needs by example, the parent component, when including the child, might want to auto-populate the input field with a name picked randomly from a default set of names. I can’t directly add that logic into the child component because then it only has a single use. I might also want to use that child component again and be able to pass a different function into generateValue which returns a fruit picked randomly from a default set of fruits.