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,



  • How about a small <script> body with minimum a export 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>
    

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.