Skip to main content

​
Nuxt File Storage

Nuxt File Storage is a comprehensive file handling module for Nuxt applications that provides a complete solution for uploading, serializing, and storing files with built-in security features.

​
What is Nuxt File Storage?

Nuxt File Storage bridges the gap between frontend file selection and backend file storage in Nuxt applications. It provides a two-part architecture:
  1. Frontend Composable (useFileStorage) - Handles file input events and serializes files into a format ready for transmission
  2. Backend Utilities - Provides secure server-side functions to store, retrieve, and manage files with built-in path traversal protection
This architecture ensures files are properly serialized on the client, safely transmitted to the server, and securely stored in your designated location.

​
Key Features

Frontend File Handling

Simple composable for handling file inputs with automatic serialization to base64 data URLs

Secure Backend Storage

Store files in your Nuxt backend with the Nitro engine, with configurable mount points

Path Traversal Protection

Built-in security features prevent directory traversal attacks and ensure files stay within configured boundaries

File Serialization

Automatic conversion between client File objects and server-side data URLs with proper MIME type handling

Streaming Support

Retrieve files as Node.js readable streams for efficient file delivery with proper content headers

TypeScript Support

Full TypeScript support with proper type definitions for ServerFile and ClientFile

Quickstart

Get up and running with a complete example in minutes

Installation

Install and configure the module in your Nuxt project

API Reference

Explore all available functions and composables

​
How It Works

The module provides a seamless workflow:
1

Select Files

Use the useFileStorage composable in your Vue components to handle file input events
2

Automatic Serialization

Files are automatically serialized to base64 data URLs with metadata (name, size, type, lastModified)
3

Send to Backend

Use $fetch to send the serialized files to your Nuxt API routes
4

Store Securely

Use storeFileLocally in your API routes to save files with automatic path validation
Nuxt File Storage handles all the complexity of file serialization, transfer, and storage so you can focus on building your application.

​
Use Cases

  • User avatar uploads
  • Document management systems
  • Image galleries
  • File sharing applications
  • Any scenario requiring secure file storage in a Nuxt application

​
Next Steps

Ready to get started? Check out the Installation Guide to add Nuxt File Storage to your project, or jump straight to the Quickstart Guide to see it in action.

Build docs developers (and LLMs) love

Get started for freeTalk to us