useDownloadText

This composable is used to download text content as a file. It is useful when you want to download a code snippet or a text file on your website.

Installation

To use the useDownloadText component in your project, you can install it via npm.

npx rosalana-dev@latest add DownloadText

Usage

The best way to use the useDownloadText composable is when you have a code snippet that your server generates and you want to let the user download it as a file. Many markdown editors have a feature to copy the code snippet. You can use this composable to add a button to also download the code snippet to save your user's time.

<template>
  <button @click="downloadText">Download</button>
</template>
<script setup lang="ts">
const downloadText = useDownloadText("code-snippet.txt", "Hello, World!");
</script>

The useDownloadText composable takes two arguments. The first argument is the file name, and the second argument is the text content that you want to download.

If you are using Nuxt MDC, you can use the customPre component to add a download button to your code snippets.

The customPre component is not available via npx rosalana-dev. You can see the source code in the GitHub repository

Be sure to change the nuxt.config file to include the customPre component in the components array.

  mdc: {
    components: {
      map: {
        "pre": "CustomPre",
      },
    },
  },
Table of Contents