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

    Building custom components from Quasar components

    Show & Tell
    2
    11
    1568
    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.
    • metalsadman
      metalsadman last edited by metalsadman

      @digiproduct change the import pinpad from "Pinpad" to import pinpad from 'pages/mytestapp/Pinpad' or is your mytestapp your root if so pages/Pinpad? assuming you are using Quasar CLI, otherwise you’ll probably need to point it to the absolute/relative path ./Pinpadwhere your Pinpad.vue file resides. as you can see on the error log, your path is not pointing to the right folder.

      you can omit importing of quasar component when you are composing in a vue file, since those are already exposed when you add it in quasar.conf.js.

      digiproduct 2 Replies Last reply Reply Quote 0
      • digiproduct
        digiproduct @metalsadman last edited by

        @metalsadman … add it in “quasar.conf.js” ?

        I think that’s the bit I might be missing because I haven’t added anything to quasar.config.js

        1 Reply Last reply Reply Quote 0
        • digiproduct
          digiproduct @metalsadman last edited by

          @metalsadman Yes, I am using Quasar CLI

          I have my component in a file called ‘Pinpad.vue’ which is located inside of the pages folder of my app, which is called ‘mytestapp’

          so the physical source file for the component is at ‘C:\code\quasar\mytestapp\src\pages\Pinpad.vue’

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

            @digiproduct import pinpad from './Pinpad' will do, since you said Calendar.vue and Pinpad.vue is in same folder.

            digiproduct 1 Reply Last reply Reply Quote 0
            • digiproduct
              digiproduct @metalsadman last edited by

              @metalsadman That’s got me closer …

              I’ve got rid of the path error …

              But … now I get a Vue warning

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

              and, I think I have the name correct … because in “Pinpad.vue” I have

                name: "pinpad",
              
              
              1 Reply Last reply Reply Quote 0
              • metalsadman
                metalsadman last edited by

                @digiproduct register it as a component in your Calendar.vue. ie.

                export default {
                ...
                  components: {
                    pinpad
                  }
                ...
                }
                digiproduct 2 Replies Last reply Reply Quote 0
                • digiproduct
                  digiproduct @metalsadman last edited by

                  @metalsadman PERFECT … many thanks.

                  I had that in Calendar.vue before … I must have removed it when going round in circles.

                  Your help is much appreciated … once again …

                  1 Reply Last reply Reply Quote 0
                  • digiproduct
                    digiproduct @metalsadman last edited by

                    @metalsadman One further quick question, if I may …

                    What’s the difference between using the ‘pages’ folder and using the ‘components’ folder?

                    I don’t understand why there is a distinction.

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

                      it’s just folder naming for organization of files. ie. pages contains full layout composing of components, while components contains your custom components that you can re-use in making pages. what i know tho, that they’ve registered these folders so you can use import from 'pages/... or import from 'components/... & etc… without the hassle of using absolute/relative paths whenever you want to point a file in one of those folders, it’s a webpack thing that i haven’t dwell deep in yet.

                      digiproduct 1 Reply Last reply Reply Quote 0
                      • digiproduct
                        digiproduct @metalsadman last edited by

                        @metalsadman I thought it must be something like that … thanks for the clarification

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post