FluxFiles for Vue / Nuxt

Vue 3 components and composables for FluxFiles — a standalone, embeddable file manager with multi-storage support (Local, AWS S3, Cloudflare R2).

Requirements

• Vue 3.3+
• A running FluxFiles core service — the backend that serves the file-manager UI and performs the storage operations (the PHP app in packages/core, e.g. via the Docker image). This package is a thin client; endpoint points at it.
• A user token, minted server-side. Your own backend can be anything: use @fluxfiles/node to issue tokens from Node/Nuxt (no PHP needed), or the Laravel / WordPress adapters.

Installation

npm install @fluxfiles/vue
# or
yarn add @fluxfiles/vue

Components

FluxFilesModal

File picker as a modal overlay:

<script setup>
import { ref } from 'vue';
import { FluxFilesModal } from '@fluxfiles/vue';

const open = ref(false);

function onSelect(file) {
    // For saved content, prefer permanent_url (url is presigned/expiring on
    // private disks). file also has mime/width/height and created/modified.
    const src = file.permanent_url || file.url;
    console.log(src, file.path);
    open.value = false;
}
</script>

<template>
    <button @click="open = true">Pick file</button>

    <FluxFilesModal
        v-model:open="open"
        endpoint="https://your-fluxfiles-host"
        :token="token"
        disk="local"
        locale="en"
        @select="onSelect"
        @close="open = false"
    />
</template>

FluxFiles

Embedded file manager (inline, no modal):

<script setup>
import { ref } from 'vue';
import { FluxFiles } from '@fluxfiles/vue';

const fm = ref();
</script>

<template>
    <FluxFiles
        ref="fm"
        endpoint="https://your-fluxfiles-host"
        :token="token"
        disk="local"
        width="100%"
        height="600px"
        @select="(file) => console.log(file)"
    />
</template>

Programmatic control via template ref:

fm.value?.navigate('/photos');
fm.value?.setDisk('s3');
fm.value?.refresh();
fm.value?.search('invoice');

Composable

useFluxFiles

Full control over the iframe communication:

import { useFluxFiles } from '@fluxfiles/vue';

const { iframeRef, iframeSrc, navigate, setDisk, refresh, search, aiTag } =
    useFluxFiles({
        endpoint: 'https://your-fluxfiles-host',
        token,
        onSelect: (file) => console.log(file),
        onEvent: (event) => console.log(event.action),
    });

<template>
    <button @click="navigate('/photos')">Photos</button>
    <button @click="setDisk('s3')">Switch to S3</button>
    <button @click="refresh()">Refresh</button>

    <iframe ref="iframeRef" :src="iframeSrc" style="width:100%;height:600px;border:none;" />
</template>

Nuxt 3

Auto-import components globally — add the plugin to nuxt.config.ts:

export default defineNuxtConfig({
    plugins: ['@fluxfiles/vue/nuxt'],
});

<FluxFiles> and <FluxFilesModal> are then available in all pages and components without importing.

Commands

All components and the composable expose these methods:

| Method | Description | |--------|-------------| | navigate(path) | Navigate to a directory | | setDisk(disk) | Switch storage disk | | refresh() | Reload current directory | | search(query) | Full-text search | | crossCopy(disk, path?) | Copy selection to another disk | | crossMove(disk, path?) | Move selection to another disk | | aiTag() | AI auto-tag selected image |

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | endpoint | string | Yes | FluxFiles server URL | | token | string | Yes | JWT token | | disk | string | No | Initial storage disk (local) | | mode | string | No | picker or browser | | multiple | boolean | No | When true, onSelect receives array of files | | maxUploadMb | number | No | Max size per uploaded file, in MB (deprecated alias: maxSize in bytes) | | maxFiles | number | No | Max files per upload batch (0/omit = unlimited; server enforces the prefix total via max_files) | | locale | string | No | UI language code | | width | string | No | Iframe width | | height | string | No | Iframe height |

Events

| Event | Payload | Description | |-------|---------|-------------| | @select | FluxFile | File selected | | @event | FluxEvent | Action event (upload, delete, move...) | | @close | — | Modal closed |

TypeScript

All types are exported:

import type { FluxFile, FluxEvent, FluxFilesConfig, FluxFilesHandle } from '@fluxfiles/vue';

License

MIT — see LICENSE for details.

Links

• FluxFiles — Main repository
• Documentation — Full docs
• Issues — Bug reports