Skip to content

shadcn.io is an independent project built on shadcn/ui

Components

Free

Download Trigger for Vue

Save a Blob or a string as a named file from any button, even when the data comes from a promise. For Vue, when the file is built in the browser.

UI library: Ark UI
Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
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

Preview width

Promise

Preview width

FAQ

What can I pass as the data of a DownloadTrigger?

A Blob, a string, a promise of either, or a function that returns one. A string is wrapped in a Blob with your mimeType, which defaults to text/plain. A Blob keeps its own type.

How do I set the file name and type?

fileName is the name the browser saves under, such as report.csv. mimeType sets the type when data is a string, for example application/json. Both are props on the trigger.

Can the file be built when the user clicks?

Yes. Pass a function or a promise and it is awaited on click, then saved. The Promise demo on this page does this, so the file can come from a fetch or a canvas without being prepared in advance.

How do I use my own Button as the trigger?

Pass asChild and put your element inside: the trigger adds the download to its click handler and keeps the child's own onClick. Without it, DownloadTrigger renders a plain button with type="button".

How do I stop a download from an onClick handler?

Call event.preventDefault() in your onClick. The trigger runs your handler first and does not download when the event was prevented, so you can validate or ask before saving.

How does it save the file without a server?

It makes an object URL from the Blob, clicks a temporary link with a download attribute, and revokes the URL. Everything happens in the browser, so no request is made and nothing is uploaded.

How do I install Download Trigger in Vue?

Run the command in the Installation section on this page. It adds one file, download-trigger, to your components folder and nothing else.

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.

mimeTypeImageFileMimeType | ApplicationFileMimeType | TextFileMimeType | FontFileMimeType | VideoFileMimeType | AudioFileMimeType | FileMimeTypeGroup | AnyString

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.