SVAR Logo
DemosLicensesContact
Get Started
 
 
 
 
 
 
 
 
Just released

Vue File Manager Component

Everything your app needs to browse, organize, and manage files in a familiar file explorer UI. Open-source, backend-agnostic, and ready to drop into any Vue 3 project.

Get Started
View Demos

Licensed under MIT

Also available for:

Key Features of SVAR Vue File Manager

some alt text

Use it with any backend

SVAR File Manager is a pure client-side Vue UI component with a rich and intuitive API. Seamlessly integrate it with any server-side backend and display files from your local file system, database or cloud storage.

some alt text

Use basic file operations

All necessary file operations are supported: download, upload, create, delete, copy, cut, paste and rename. You can also preview files and file details: size, creation date or any other meta info.

some alt text

Show files in list or tiles views

Select from two layouts offered by our Vue File Manager to showcase folder contents. Switch to a tabular list view for detailed file information or choose a tiles view for icons or thumbnails display.

some alt text

Easily navigate files and folders

To simplify your file system navigation, SVAR File Manager provides a left-side tree view, displaying folders hierarchically. Moreover, breadcrumbs at the top visualize your location within the file system.

some alt text

Work efficiently in split view

Our Vue file manager component provides a useful split view feature. It allows you to copy, move, and organize files between two distinct locations of your file system in a quick and comfortable way.

some alt text

Find and sort files

Find files or folders by simply typing their name in the search box. Additionally, you can sort folder content by clicking column headers for ascending or descending order in list view.

Star on GitHub

Try Live Demo

Open Fullscreen Demo

Production-Ready Vue File Manager

Keyboard shortcuts

SVAR File Manager provides keyboard shortcuts for all supported operations such as create, delete, download, copy, cut, paste, and rename, streamlining your workflow and efficiency.

Dynamic loading for optimal performance

Accelerate loading time by initially displaying only the top-level folders, and dynamically load the contents of folders upon request.

Skins and customization

Choose from 2 built-in light and dark themes. Use CSS variables to modify File Manager's colors, icons, menu items, and other visual elements to match your design requirements.

Storage info and refresh button

Keep track of available free space with our storage space information feature. Collaborating with multiple users? Use the 'refresh' button to instantly update the folder's contents.

Professional support

Need custom features or integration help? Our experienced team provides priority support, custom development, and consulting services.

Contact Us

Frequently Asked Questions

SVAR Vue File Manager is a Vue 3 component that provides a fully featured file explorer interface for Vue and Nuxt applications. It offers file navigation tree, split, list and tiles views, file preview, and keyboard navigation — with a clean, composable API that fits naturally into the Vue ecosystem.
Yes, the component is open-source and released under the MIT license, free for both personal and commercial use. See it on GitHub →.
Yes. The component is completely backend-agnostic. Whether you're working with a REST API, cloud storage, a local file system, or a database-backed solution, the Vue File Manager integrates with any server-side setup via its flexible data API.
All essential file management actions are supported. Users can create, delete, copy, cut, paste, rename, upload, and download files. The component also provides file preview panel, storage tracking, easy-to-use context menu, as well as file searching and sorting capabilities.
Not currently. File operations are handled through the context menu, toolbar, and keyboard shortcuts.
The component implements dynamic loading — top-level folders are rendered on initialization, and nested contents are fetched on demand as the user explores. This makes the file browser performant in Nuxt SSR environments and data-intensive Vue applications.
It is quite easy:
  • Install the package: npm install @svar-ui/vue-filemanager
  • Import the Filemanager component and styles into your Vue app
  • Pass your file structure via the data prop
  • Wrap the component in a theme — Willow (light) or WillowDark — to apply built-in styles
Built with full TypeScript support, the component integrates seamlessly into typed Vue 3 projects. You can further customize colors, icons, and other visual elements via CSS variables to fit any design system. See the Getting Started guide for a full setup walkthrough.

Resources

icon

How to start guide

Quick start

icon

Community forum

Visit forum

icon

GitHub repository

Visit github