3. register the component correctly? < error >

register the component correctly? < error >


  • Hi,
    Please suggest what i am missing for getting this error ( I am using Quasar 0.14 )

    0_1500925443823_111.png

    Thanks,

    0

  • How about a small <script> body with minimum a export default {} inside ?

    0
  • S

    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)

    0

  • 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>
    1
  • S

    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>
    1
  • S

    notice we don’t need to import QFab in index, since it is not used directly in the template.

    1

  • @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>
    1