Download Trigger for Vue

Trigger file downloads programmatically.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Usage

<script setup lang="ts">
import { DownloadIcon, FileTextIcon } from "lucide-vue-next";
import { Button } from "@/components/ui/button";
import { DownloadTrigger } from "@/components/ui/download-trigger";
import { Item, ItemTitle } from "@/components/ui/item";
</script>

const DownloadTriggerDemo = () => (
  <div className="flex flex-col gap-4">
    <Item variant="outline">
      <FileTextIcon />
      <ItemTitle>{content}</ItemTitle>
    </Item>
    <DownloadTrigger
      asChild
      data={content}
      fileName="hello.txt"
      mimeType="text/plain"
    >
      <Button size="lg" variant="outline">
        <DownloadIcon />
        Download
      </Button>
    </DownloadTrigger>
  </div>
);

const content = "Hello, World! This is a sample text file.";

Accessibility

Enter: Activate the focused control.
Space: Activate the focused control.

Demos

Download Svg

PreviewCode

Promise

PreviewCode

API Reference

DownloadTrigger

data-slot="download-trigger"

PropType

dataDownloadableData | (() → MaybePromise<DownloadableData>)

The data to download.

Type: DownloadableData | (() → MaybePromise<DownloadableData>)

fileNamestring

The name of the file to download.

The MIME type of the data to download.

Type: ImageFileMimeType | ApplicationFileMimeType | TextFileMimeType | FontFileMimeType | VideoFileMimeType | AudioFileMimeType | FileMimeTypeGroup | AnyString

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.