WebDAV Explorer

A high-performance, modern web interface for managing your WebDAV storage. Built for speed, security, and a native-like file management experience.

Installation

Install davfinder via your preferred package manager:

npm install davfinder
# or
yarn add davfinder
# or
pnpm add davfinder

Quick Start

1. Register the Plugin

In your application's entry file (e.g., main.ts or main.js), import davfinder and its CSS file, then register it with your Vue app.

import { createApp } from 'vue';
import App from './App.vue';
import DavFinder from 'davfinder';
import 'davfinder/dist/style.css';

const app = createApp(App);

app.use(DavFinder, {
  locale: 'en',
  // Optional: Dynamically load language packs if your bundler supports it
  /*
  i18n: {
    en: async () => await import('davfinder/dist/locales/en.js'),
    ...
  }
  */
});

app.mount('#app');

2. Use the Component

In your Vue component (e.g., App.vue), import the WebDAVDriver, initialize the connection, and pass it to the <VueFinder> component.

<template>
  <div style="height: 100vh; width: 100vw;">
    <VueFinder 
      v-if="driver" 
      id="webdav-finder" 
      :driver="driver" 
      :config="{
        fullScreen: true,
        theme: 'silver'
      }" 
    />
    <div v-else>
      Connecting to WebDAV server...
    </div>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, onMounted } from 'vue';
import { WebDAVDriver } from 'davfinder';

const driver = shallowRef<WebDAVDriver | null>(null);

onMounted(async () => {
  try {
    // Initialize the WebDAV driver
    const tempDriver = new WebDAVDriver({
      url: 'https://your-server.com/dav',
      username: 'your_username',
      password: 'your_password',
      storagePrefix: 'davs'
    });

    // Verify connection
    await tempDriver.list({ path: 'davs://' });

    // Render the file explorer
    driver.value = tempDriver;
  } catch (error) {
    console.error('Failed to connect to WebDAV server:', error);
  }
});
</script>

<style>
/* Ensure the body has no margin for a true fullscreen experience */
body {
  margin: 0;
  padding: 0;
}
</style>

Dependencies

This project is built using the following open-source libraries:

• Vue 3+
• vue-advanced-cropper : JavaScript image cropper
• viselect : Selection utility
• Uppy : Upload library
• vanilla-lazyload : lightweight and flexible lazy loading for thumbnails
• mitt : Tiny 200 byte functional event emitter / pubsub
• OverlayScrollbars : scrollbar plugin
• nanostores : A tiny state manager
• @nanostores/i18n : Internationalization backend for nanostores
• vue-sonner : Toast notification component
• @floating-ui/dom : Floating UI positioning library
• @tanstack/vue-query : fetching, caching, synchronizing and updating server state
• vuefinder : UI component framework.
• webdav : WebDAV client for browsers and Node.js.