File Providers

Nuxt PDF Kit supports loading PDF files from various sources through its provider system. This allows you to seamlessly integrate PDFs from Google Drive, custom CDNs, or any other source without manual server configuration.

Available Providers

URL Provider (Default)

The default provider for loading PDFs from direct URLs.

<template>
  <NuxtPdfKit src="/sample.pdf" />
</template>

Use cases:

• Local PDF files in your /public directory
• Direct URLs from your own server
• Any publicly accessible PDF URL with proper CORS headers

Google Drive Provider

Load PDFs directly from Google Drive without manual server routes.

<template>
  <NuxtPdfKit provider="gdrive" src="1bAsv95pTaBiHyGiWFIa-zebT31Al_0tu" />
</template>

How to get Google Drive File ID:

1. Open your file in Google Drive
2. Click "Share" → "Get link"
3. Copy the ID from the URL: https://drive.google.com/file/d/FILE_ID_HERE/view
4. Use that ID as the src prop

Features:

• ✅ Automatic CORS handling
• ✅ Built-in caching (24 hours)
• ✅ Virus scan warning detection
• ✅ No manual server routes needed

Important Notes:

Custom Provider

Use your own CDN or proxy server with custom URL transformation.

<template>
  <NuxtPdfKit
    provider="custom"
    src="file-123"
    :provider-config="{
      baseUrl: '/cdn',
      transform: (id) => `/cdn/${id}.pdf`,
    }"
  />
</template>

Configuration Options:

• baseUrl: Base URL for your custom provider
• transform: Custom function to transform the src into a full URL
• cache: Enable/disable caching (default: true)
• maxAge: Cache duration in seconds (default: 86400)

Example with custom transform:

<script setup>
const providerConfig = {
  transform: (id) => {
    // Custom logic to build URL
    return `https://my-cdn.com/pdfs/${id}.pdf?token=xyz`;
  },
};
</script>

<template>
  <NuxtPdfKit
    provider="custom"
    src="document-123"
    :provider-config="providerConfig"
  />
</template>

Complete Example

Here's a complete example showing how to switch between providers:

<template>
  <div>
    <!-- Provider Selector -->
    <select v-model="selectedProvider">
      <option value="url">Direct URL</option>
      <option value="gdrive">Google Drive</option>
      <option value="custom">Custom CDN</option>
    </select>

    <!-- PDF Viewer -->
    <NuxtPdfKit
      :provider="selectedProvider"
      :src="pdfSource"
      :provider-config="providerConfig"
      title="My Document"
    />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const selectedProvider = ref("url");

const pdfSource = computed(() => {
  switch (selectedProvider.value) {
    case "gdrive":
      return "1bAsv95pTaBiHyGiWFIa-zebT31Al_0tu";
    case "custom":
      return "file-123";
    default:
      return "/sample.pdf";
  }
});

const providerConfig = computed(() => {
  if (selectedProvider.value === "custom") {
    return {
      baseUrl: "/cdn",
      transform: (id) => `/cdn/${id}.pdf`,
    };
  }
  return undefined;
});
</script>

TypeScript Support

All provider types are fully typed:

import type { PdfProvider, ProviderConfig } from "nuxt-pdf-kit";

const provider: PdfProvider = "gdrive";
const config: ProviderConfig = {
  baseUrl: "/cdn",
  cache: true,
  maxAge: 86400,
};

Troubleshooting

Google Drive: "Invalid PDF structure" Error

Cause: The file may be too large and triggered Google's virus scan warning.

Solutions:

1. Use a smaller file (< 100MB)
2. Download the file and host it directly
3. Use a different provider

Google Drive: "File ID is missing" Error

Cause: The file ID was not extracted correctly.

Solutions:

1. Verify the file ID is correct
2. Make sure you're using just the ID, not the full URL
3. Check that the file has public access

Custom Provider: CORS Errors

Cause: Your custom server doesn't have proper CORS headers.

Solutions:

1. Add CORS headers to your server:

   // server/routes/cdn/[id].ts
   setResponseHeader(event, "Access-Control-Allow-Origin", "*");
   

2. Use a proxy route to handle CORS

Contributing New Providers

Want to add support for OneDrive, Dropbox, or another service? See our Contributing Guide below!