Building custom components from Quasar components

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?

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