Declaring third party modules in Quasar with TypeScript

Question

I am trying to use Dropzone-vue on my quasar but apparently i can't simply install it and declare it on a main.js file because quasar doesn't have one. I also get the following error:

Could not find a declaration file for module 'dropzone-vue'. 'c:/Users/me/Desktop/my-project/node_modules/dropzone-vue/dist/dropzone-vue.common.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/dropzone-vue` if it exists or add a new declaration (.d.ts) file containing `declare module 'dropzone-vue';`Vetur(7016)

I tried the suggested command but it is not supported so where show I place my .d.ts files and how should I declare all my third party modules?

My component with the dropzone is the following:

<template>
  <q-page padding>
    DropZone
    <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
      <drop-zone
        :maxFiles="Number(10000000000)"
        url="http://localhost:5000/item"
        :uploadOnDrop="true"
        :multipleUpload="true"
        :parallelUpload="3"/>
    </div>
  </q-page>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Dropzone from 'dropzone-vue';


export default defineComponent({
  components: {
    Dropzone,
  },
  setup() {
    return {

    };
  },
})
</script>

Answer 1

This is exactly what bootfiles are designed for in Quasar.

https://quasar.dev/quasar-cli/boot-files

Check the docs, it should help you solve this.

For example, this is how I added apexcharts

// src/boot/apexcharts.js

import { boot } from 'quasar/wrappers';
import VueApexCharts from 'vue3-apexcharts';

export default boot(({ app }) => {
  app.use(VueApexCharts);
});

Then you add it to the quasar.conf.js file:

  boot: [
    'apexcharts'
  ],

Answer 2

If the d.ts file cannot be found, then usually only a xxx.d.ts file can be declared under the directory /src/, and the module declaration will be introduced in it.

// /src/global.d.ts
declare module "dropzone-vue";