[Solved] Error when calling some components

  • I have a problem. When I try to put the input component it says I did not register correctly, however I have all the components registered in main.js and the select component works and collapsed also, but some components have the same problem, I tried to make the call Individual from the single component in the .vue file, but does not work either.

    Follows error field input field
    0_1501246711464_erro 1.png

    His call in the file vue

    The call of the components in main.js

  • Hm… your import looks alright, but what seems odd is line 20 from your second screenshot, there you are closing a nonexisting q-field tag.

  • @a47ae Good catch. @tonpereira seems to be closing a nonexistant q-field tag instead of closing the q-input tag. Do let us know if that solves the problem @tonpereira

  • Thank you! @a47ae and @JCharante
    I had not noticed that I had this error, but it did not work!
    In the documentation tells me that I can input the input

    <! - Single Line Input ->
    <Q-input v-model = “text” />


    But when I put it that way it still gives the same error, I tried to close the tag so

    <Q-input v-model = “text”> </ q-input>

    But it still does not work.

  • Could you please try and explicitly importing QInput in contato.vue (and of course, register it in the componentssection) and tell us the result?

  • I did the component import in vue. As the image below shows and now the following error appears.
    "Failed to mount component: template or render function not defined.

    import CpTitulo from ‘…/…/modulo/titulo/titulo.vue’
    import QInput from ‘quasar’

    export default {
      data () {
        return {
          dadostitulo: {
            subtitulo: 'Contato'
          text: ''
      components: {
        CpTitulo, QInput

  • Hmm… It’s kinda hard to debug without the whole component, can you post the full file in the forum (please use ``` at the start and end of the block to format it) or when it is too large post it on https://pastebin.com/

  • @a47ae segue o codigo do componente todo

  • Thanks, I found the error, please change your import statement in line 59 to import { QInput } from 'quasar'

  • I did it this way and I continue without displaying the input and with the same error.

    Unknown custom element: <q-input> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

  • Okay, it worked for me, so the error must be in another file.

  • @tonpereira you need to add this code in your contato.vue

    import {
    } from 'quasar'
    export default {
      components: {
      data () {
        return {
          text: ''

  • @rohityadav I think it it already there, see the pastebin and my correction.

  • @a47ae yes i agree you are correct and i appreciated as your response and helping to others .
    but missing { } es6 syntax for importing named export . So QInput should be in { }

    import {
    } from 'quasar'

  • @rohityadav I already corrected this error in answer 9 🙂
    And as I stated, I think the error is in another file, cause with the corrected import it is working for me.

  • @tonpereira You are right, I didn’t notice the /. The self closing syntax should work just fine. Have you tried to isolate the issue by creating a minimalistic repo to reproduce the error? And you’re using quasar 0.14 beta & vue 2.3.x right?

  • Hi,

    I have the same problem, but I cant fix it globaly:
    Vue.use(Quasar, { components: All, directives: All })

    and error is
    vue.runtime.esm.js?a427:475 [Vue warn]: Unknown custom element: <q-input> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

    found in

    —> <Index> at /projet/proto/quasar/src/components/Index.vue
    <App> at /projet/proto/quasar/src/App.vue

    I just :

    • quasar init default
    • add the import + components
    • add <q-input v-model="text" />

    So globally or localy, it doesnt work.
    Quasar : 13.1 / Vue 2.4.2


  • OK, I found my mistack… I’m new with Quasar, and looking for a new UI framwork cause I’m not very satify with ElementUI.
    So, I migrate my app - BUT - I read the doc of the 0.14, And the default npm install use 0.13 :o) :o)

    So, I’m ready for the future 🙂

  • Thanks everyone for the help, I already found the error.

    I was really trying to use the documentation for a different version of the one that was installed.

    Thank you everyone for the attention!

  • Make sure you add the QField or QInput in components needed in quasar.config.js file

    framework: {
          components: [

Log in to reply