Navigation

    Quasar Framework

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

    Building custom components from Quasar components

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

      I am trying to use the following tutorial’s technique to create a new custom component …

      Re: [How To] Building components with Quasar

      I am trying to follow the tutorial in the above forum message to create a custom component from a Quasar component just to get the process correct before I move onto slightly more complex components … but I get an error message so I must be doing something wrong … can anyone tell me what I’ve done wrong?

      The error message is

      Module not found: Error: Can't resolve 'Pinpad' in 'C:\code\quasar\mytestapp\src\pages'
      

      Here’s what I’ve got …

      In the pages folder of mytestapp, I have the following file called ‘Pinpad.vue’

      <template>
        <div>
          <q-btn @click="handleClick">Click Me</q-btn>
        </div>
      </template>
      
      <script>
      import { QBtn } from "quasar";
      
      export default {
        data() {
          return {
            pin: ""
          };
        },
        methods: {
          handleClick() {
            console.log("Pinpad QBtn clicked");
          }
        },
        mounted: function() {
          console.log("Mounting Pinpad");
        },
        components: { QBtn }
      };
      </script>
      

      and I have another page, called ‘Calendar.vue’ also in the pages, where I want to use this new component, and it is defined as follows:-

      <template>
        <q-page>
          <div class="q-pa-md">
            <pinpad></pinpad>
          </div>
        </q-page>
      </template>
      
      <style>
      </style>
      
      <script>
      import pinpad from "Pinpad";
      
      export default {
        data() {
          return {};
        }
      };
      </script>
      
      

      the actual full error that I get is

      Failed to compile.
      
      ./src/pages/Calendar.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/Calendar.vue?vue&type=script&lang=js&)
      Module not found: Error: Can't resolve 'Pinpad' in 'C:\code\quasar\mytestapp\src\pages'
      

      Can anyone point me toward what I am doing wrong?

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