1---
2category: Utilities
3---
4 
5# useBase64
6 
7Reactive base64 transforming. Supports plain text, buffer, files, canvas, objects, maps, sets and images.
8 
9## Usage
10 
11```ts
12import { useBase64 } from '@vueuse/core'
13import { shallowRef } from 'vue'
14 
15const text = shallowRef('')
16 
17const { base64, promise, execute } = useBase64(text)
18```
19 
20### Supported Input Types
21 
22- `string` - Plain text
23- `Blob` - File or blob data
24- `ArrayBuffer` - Binary data
25- `HTMLCanvasElement` - Canvas element
26- `HTMLImageElement` - Image element
27- `Object` / `Array` / `Map` / `Set` - Serialized to JSON
28 
29### Return Values
30 
31| Property  | Description                               |
32| --------- | ----------------------------------------- |
33| `base64`  | The resulting base64 string               |
34| `promise` | The promise of the current transformation |
35| `execute` | Manually trigger the transformation       |
36 
37### Data URL Format
38 
39By default, the output is in Data URL format (e.g., `data:text/plain;base64,...`). Set `dataUrl: false` to get raw base64.
40 
41```ts
42const { base64 } = useBase64(text, { dataUrl: false })
43// Returns raw base64 without the data URL prefix
44```
45 
46### Canvas and Image Options
47 
48When transforming canvas or image elements, you can specify the MIME type and quality.
49 
50```ts
51const canvas = document.querySelector('canvas')
52 
53const { base64 } = useBase64(canvas, {
54  type: 'image/jpeg', // MIME type
55  quality: 0.8, // Image quality (0-1, for jpeg/webp)
56})
57```
58 
59### Custom Serializer
60 
61For objects, arrays, maps and sets, you can provide a custom serializer. Otherwise, the data will be serialized using `JSON.stringify` (maps are converted to objects, sets to arrays).
62 
63```ts
64const data = shallowRef({ foo: 'bar' })
65 
66const { base64 } = useBase64(data, {
67  serializer: v => JSON.stringify(v, null, 2),
68})
69```
70 
71## Type Declarations
72 
73```ts
74export interface UseBase64Options {
75  /**
76   * Output as Data URL format
77   *
78   * @default true
79   */
80  dataUrl?: boolean
81}
82export interface ToDataURLOptions extends UseBase64Options {
83  /**
84   * MIME type
85   */
86  type?: string | undefined
87  /**
88   * Image quality of jpeg or webp
89   */
90  quality?: any
91}
92export interface UseBase64ObjectOptions<T> extends UseBase64Options {
93  serializer?: (v: T) => string
94}
95export interface UseBase64Return {
96  base64: ShallowRef<string>
97  promise: ShallowRef<Promise<string>>
98  execute: () => Promise<string>
99}
100export declare function useBase64(
101  target: MaybeRefOrGetter<string | undefined>,
102  options?: UseBase64Options,
103): UseBase64Return
104export declare function useBase64(
105  target: MaybeRefOrGetter<Blob | undefined>,
106  options?: UseBase64Options,
107): UseBase64Return
108export declare function useBase64(
109  target: MaybeRefOrGetter<ArrayBuffer | undefined>,
110  options?: UseBase64Options,
111): UseBase64Return
112export declare function useBase64(
113  target: MaybeRefOrGetter<HTMLCanvasElement | undefined>,
114  options?: ToDataURLOptions,
115): UseBase64Return
116export declare function useBase64(
117  target: MaybeRefOrGetter<HTMLImageElement | undefined>,
118  options?: ToDataURLOptions,
119): UseBase64Return
120export declare function useBase64<T extends Record<string, unknown>>(
121  target: MaybeRefOrGetter<T>,
122  options?: UseBase64ObjectOptions<T>,
123): UseBase64Return
124export declare function useBase64<T extends Map<string, unknown>>(
125  target: MaybeRefOrGetter<T>,
126  options?: UseBase64ObjectOptions<T>,
127): UseBase64Return
128export declare function useBase64<T extends Set<unknown>>(
129  target: MaybeRefOrGetter<T>,
130  options?: UseBase64ObjectOptions<T>,
131): UseBase64Return
132export declare function useBase64<T>(
133  target: MaybeRefOrGetter<T[]>,
134  options?: UseBase64ObjectOptions<T[]>,
135): UseBase64Return
136```
137