register the component correctly? < error >
-
Hi,
Please suggest what i am missing for getting this error ( I am using Quasar 0.14 )Thanks,
-
How about a small
<script>
body with minimum aexport default {}
inside ? -
I agree with @bl
Your Fab.vue is missing a few pieces. It is probably also missing at least one import (I imagine q-small-fab is another custom component of yours, you should import it) -
Thanks @bl and @spectrolite for reply . can you please suggest which import i am missing ?
And q-small-fab was in v0.13 now i am update but still have issue[Vue warn]: Unknown custom element: <q-fab> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <AppFab> at C:\workspaceArea\workspace_quasar\appQuasar\src\components\web-components\Fab.vue <QLayout> <Index> at C:\workspaceArea\workspace_quasar\appQuasar\src\components\Index.vue <App> at C:\workspaceArea\workspace_quasar\appQuasar\src\App.vue <Root>
And also I have updated Fab.vue @spectrolite yes you are write wrong with this Fab.vue i am worrying which import i am missing.
<template> <div> <div class="layout-padding"> <q-fab color="primary" active-icon="alarm" direction="right" > <q-fab-action color="purple" @click="toast('mail')" icon="mail"> <q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Mail</q-tooltip> </q-fab-action> <q-fab-action color="secondary" @click="toast('alarm')" icon="alarm"> <q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Alarm</q-tooltip> </q-fab-action> </q-fab> </div> </div> </template>
This is where i want to use as custom component in Index.vue
<template> <q-layout ref="layout" view="lHr LpR lFr" :left-class="{'bg-grey-2': true}" > <q-toolbar slot="header"> <!--<q-toolbar slot="header" class="glossy">--> <q-btn flat @click="$refs.layout.toggleLeft()" > <q-icon name="menu" /> </q-btn> <q-toolbar-title> Quasar App <div slot="subtitle">Running on Quasar v{{$q.version}}</div> </q-toolbar-title> </q-toolbar> <div slot="left"> <!-- Use <q-side-link> component instead of <q-item> for internal vue-router navigation --> <q-list no-border link inset-delimiter> <q-list-header>Essential Links</q-list-header> <!--<q-item @click="launch('http://quasar-framework.org')"> <q-item-side icon="school" /> <q-item-main label="Docs" sublabel="quasar-framework.org" /> </q-item> --> <q-side-link item to="/" exact> <q-item-side icon="school" /> <q-item-main label="Home"/> </q-side-link> <q-side-link item to="/Aboutme"> <q-item-side icon="record_voice_over" /> <q-item-main label="About Me"/> </q-side-link> <q-side-link item to="/Skills"> <q-item-side icon="record_voice_over" /> <q-item-main label="Skills"/> </q-side-link> <q-side-link item to="/Mywork"> <q-item-side icon="school" /> <q-item-main label="My Work"/> </q-side-link> <q-side-link item to="/Contactme"> <q-item-side icon="record_voice_over" /> <q-item-main label="Contact Me"/> </q-side-link> </q-list> </div> <!-- Replace following <div> with <router-view /> component if using subRoutes --> <router-view class="layout-view"></router-view> <app-fab></app-fab> </q-layout> </template> <script> import { QLayout, QToolbar, QToolbarTitle, QBtn, QIcon, QList, QListHeader, QItem, QItemSide, QItemMain, QSideLink, QFab } from 'quasar' import Fab from './web-components/Fab.vue' export default { components: { QLayout, QToolbar, QToolbarTitle, QBtn, QIcon, QList, QListHeader, QItem, QItemSide, QItemMain, QSideLink, QFab, appFab: Fab } } </script> <style lang="stylus"> </style>
-
Fab.vue
<template> ... </template> <script> import { QFab } from 'quasar' export default { components: { QFab } } </script>
index.vue
<template> ... </template> <script> import { QLayout, QToolbar, QToolbarTitle, QBtn, QIcon, QList, QListHeader, QItem, QItemSide, QItemMain, QSideLink } from 'quasar' import Fab from './web-components/Fab.vue' export default { components: { QLayout, QToolbar, QToolbarTitle, QBtn, QIcon, QList, QListHeader, QItem, QItemSide, QItemMain, QSideLink, appFab: Fab } } </script> <style lang="stylus"> </style>
-
notice we don’t need to import QFab in index, since it is not used directly in the template.
-
@spectrolite Thank you so much for taking time and helping, appreciated.
And Now issue has been resolved.for the Note:- Also to added couple of import like below
Fab.vue<script> import { QFab, QFabAction, QTooltip } from 'quasar' export default { components: { QFab, QFabAction, QTooltip } } </script>