How to use it for Vue 2?

[hrynko]

Hi @thanhhai1999!

I take it you've already dealt with this issue. But I'll leave a note here for developers who may encounter this problem in the future.

Installation is the same for both Vue 2 and Vue 3 (see README.md). You can find 4 files in the dist directory of the installed package:

dist
┣ vue2-pdf-embed.js          # UMD module for Vue 2
┣ vue2-pdf-embed.worker.js   # Fallback PDF WebWorker
┣ vue3-pdf-embed.js          # UMD module for Vue 3
┗ vue3-pdf-embed.worker.js   # Fallback PDF WebWorker

Thus, there are different builds for Vue 2 and Vue 3. By default, the module is exported as for Vue 3:

import VuePdfEmbed from 'vue-pdf-embed'

For Vue 2, you have to explicitly name the build file:

import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-pdf-embed'

The name of the build file can also be specified when installing via CDN (see unpkg.com):

<script src="https://unpkg.com/vue-pdf-embed/dist/vue2-pdf-embed.js"></script>

[nowrap]

In a typescript vue 2 project it's complaining about the missing ts declaration:

TS7016: Could not find a declaration file for module 'vue-pdf-embed/dist/vue2-pdf-embed'.

Try `npm i --save-dev @types/vue-pdf-embed` if it exists or add a new declaration (.d.ts) file containing `declare module 'v
ue-pdf-embed/dist/vue2-pdf-embed';

Can the existing index.d.ts file somehow used for vue 2?

[hrynko]

Hi @nowrap,

The default exported declaration is for Vue 3. I'll try to come up with something for Vue 2 by the next release, but for now I think you can override it yourself by creating a new declaration file (vue-pdf-embed.d.ts) with content like the following:

import { VueConstructor } from "vue";
import {
  VuePdfEmbedData,
  VuePdfEmbedMethods,
  VuePdfEmbedProps,
} from "vue-pdf-embed/types";

declare module "vue-pdf-embed/dist/vue2-pdf-embed" {
  interface VuePdfEmbedConstructor extends VueConstructor {
    props: VuePdfEmbedProps;
    data: () => VuePdfEmbedData;
    methods: VuePdfEmbedMethods;
  }

  const VuePdfEmbed: VuePdfEmbedConstructor;

  export default VuePdfEmbed;
}

[hrynko]

UPD: This is no longer needed, since 1.1.3 there are two separate typings (for Vue 2 and Vue 3).