Building custom components from Quasar components

[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]

@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

[digiproduct]

@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’

[metalsadman]

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

[digiproduct]

@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",

[metalsadman]

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

export default {
...
  components: {
    pinpad
  }
...
}

[digiproduct]

@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 …

[digiproduct]

@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.

[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]

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