Getting error when using Quasar component inside a custom functional component

Question

I'm using Quasar 1.6.1 with the autoload option (It autoloads the quasar components I use without me needing to define them). I wrote a custom functional component that uses <q-tooltip>, but when I try to run it I get this error:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

If I don't use a functional component it works.

<template functional>
  <div class="item q-mb-sm">
    <div class="text-small text-grey-6">{{ props.label }}</div>
    <div v-if="!props.longText">{{ props.text }}</div>
    <div v-else class="row q-gutter-sm">
      <div class="ellipsis col">
        {{ props.text }}
      </div>
      <div class="cursor-pointer">
        <img src="~assets/copy.svg" alt="copy" />
        <q-tooltip :offset="[5, 5]" anchor="top middle" self="bottom middle">
          Copy
        </q-tooltip>
      </div>
    </div>
  </div>
</template>

Pratik Patel · Accepted Answer · 2020-01-07 13:17:04Z

2

I think you need to register the QTooltip component in quasar.confg.js.

framework: {
      components: [  
      'QTooltip',
   ]
}

Component - I have tested this component it's working fine for me.

<template functional>
  <div class="q-mb-sm">
    <q-btn color="secondary" class="text-capitalize">Copy
      <q-tooltip :offset="[5, 5]" anchor="top middle" self="bottom middle">
        Copy
      </q-tooltip>
    </q-btn>
    {{props.test}}
  </div>
</template>

<script>
    export default {
        name: "test",
        props: ['test']
    }
</script>

<style scoped>

</style>

demo - https://codesandbox.io/s/sharp-darwin-7h17m

edited Jan 7, 2020 at 13:17

answered Jan 7, 2020 at 12:16

Pratik Patel

7,0381 gold badge20 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting error when using Quasar component inside a custom functional component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related