No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    register the component correctly? < error >

    Help
    3
    7
    7038
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • rohityadav
      rohityadav last edited by

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

      0_1500925443823_111.png

      Thanks,

      1 Reply Last reply Reply Quote 0
      • bl
        bl last edited by

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

        1 Reply Last reply Reply Quote 0
        • S
          spectrolite last edited by

          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)

          1 Reply Last reply Reply Quote 0
          • rohityadav
            rohityadav last edited by rohityadav

            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 Reply Last reply Reply Quote 1
            • S
              spectrolite last edited by

              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 Reply Last reply Reply Quote 1
              • S
                spectrolite last edited by

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

                1 Reply Last reply Reply Quote 1
                • rohityadav
                  rohityadav last edited by rohityadav

                  @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 Reply Last reply Reply Quote 1
                  • First post
                    Last post