@fluxfiles/vue

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:

Props

Events

Storage disks, SFTP & terminal

This component just embeds whatever FluxFiles server its endpoint points at and renders the token your backend mints — so the available disks and features (Local / S3 / R2 / SFTP, chmod, the SSH terminal) come from that server + token, not from this package. Point endpoint at a standalone FluxFiles server (or Docker) with an SFTP disk and mint the token with the right claims (e.g. via @fluxfiles/node); see the core README.

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