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?