Looking at the name property again, @rstoenescu - is there any detriment to naming the component? If not, in giving it a name the Vue dev tools uses the name (converting to camelCase) property to populate nodes. My preference would be to supply the name for this reason, unless there’s a good reason to avoid it!

Very clear, thank you @rstoenescu !

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

Argh, nevermind, I figured it out. I don’t need to register my component, I was referencing it incorrectly within another component that was using it.

I’ve created a custom component, and I’d like to know how to register it, if possible, quasar/src/via install.js if that it the correct way to do it?

In most of the online tutorials for Vue 2.0 and their own guides, they’re mostly using template: ... but I get errors about runtime mode not allowing that. So I switched to use of the <template /> tag as with all of the Quasar components - but I cannot find a way to register my component official for use.

Cheers!

Hi,

In the doc example I can see that there is a toggle which I presume toggles the ready data prop and therefore makes the next step available.

I have a series of steps similar to this, each with a requirement before the User may proceed. The docs describe all of the parts, but don’t address how this happens - for example there is nothing I could see describing how the toggle worked to unlock the next step.

I googled for tutorials on using Vue’s stepper, but didn’t come up with much of use, any help on how to work with this - or or if there’s a broader concept I need to understand, that would be most appreciated.

Cheers!

@Martin You’ve straightened that out for me, thank you, the stuff I’m working from has been cobbled together from a previously mostly working Vue prototype, turned into a Quasar prototype, doubtless I got a couple of things mixed up and then tried following the wrong thread; sub-routes, which I simply don’t need.

Another question, but related to this thread, is once I have the suggested setup for sub-routes and my basic navigation loads each given route, where does my original index content live and how does it get loaded? Do I set it as a default? I’m pretty sure I’m approaching that wrongly.

@Martin No that extra screenshot was useful, thanks

Hi,

I’ve just included SASS as my pre-processor of choice, and I’d like to be able to use the existing work included via a .styl theme.

Is this possible?

Yes, thanks for that update, I wondered the same thing about documentation.

Not having learned much practical Vue usage yet, but enjoying your implementation so far, I wondered if it would be possible to construct a single page containing available components to showcase, programmatically, the design principles being applied.

If doing this by using exist infrastructure, might it reduce the documentation overhead as the framework matures?

Just a thought, it was the first step I considered putting together myself so that I could understand themeing with Quasar in a visual way.

I like that you’ve steered away from existing style frameworks to ensure optimisation is maintained and markup structure isn’t tethered to same-same ways of thinking. The technical debt incurred by this approach will be a burden until the merits of the decision are well laid out.

EDIT: I have just now found and read through http://quasar-framework.org/components/list.html

Awesome, absolutely awesome way of presenting all of the component information.