Configuration

VueFinder provides a comprehensive configuration system that allows you to customize its behavior and appearance.

Config Options

All configuration options are passed via the config prop:

<vue-finder
  id="my_vuefinder"
  :driver="driver"
  :config="{
    view: 'grid',
    theme: 'valorite',
    persist: true,
  }"
/>

Configuration Properties

Property	Type	Default	Description
view	'grid' | 'list'	'grid'	View mode: grid or list
theme	Theme	'silver'	Theme name (see Theming)
fullScreen	boolean	false	Start in full-screen mode
showTreeView	boolean	false	Show sidebar tree view
showHiddenFiles	boolean	true	Show hidden files
compactListView	boolean	true	Use compact list view style
metricUnits	boolean	false	Use metric file sizes (KB, MB) instead of binary (KiB, MiB)
showThumbnails	boolean	true	Show image thumbnails
persist	boolean	false	Persist current path to localStorage
showMenuBar	boolean	true	Show menu bar (non-persistent, resets on page reload)
showToolbar	boolean	true	Show toolbar (non-persistent, resets on page reload)
initialPath	string | null	null	Initial path on mount
loadingIndicator	'linear' | 'circular' | string	'circular'	Loading indicator style
maxFileSize	number | string | null	null	Maximum file upload size (e.g., '10mb', '50mb')
pinnedFolders	DirEntry[]	[]	Array of pinned folders

Examples

Basic Configuration

<template>
  <vue-finder
    id="basic"
    :driver="driver"
    :config="{
      view: 'grid',
      theme: 'silver',
      persist: false,
    }"
  />
</template>

Advanced Configuration

<template>
  <vue-finder
    id="advanced"
    :driver="driver"
    :config="{
      view: 'list',
      theme: 'valorite',
      fullScreen: false,
      showTreeView: true,
      showHiddenFiles: false,
      compactListView: true,
      metricUnits: true,
      showThumbnails: true,
      persist: true,
      initialPath: 'local://documents',
      loadingIndicator: 'linear',
      maxFileSize: '50mb',
      pinnedFolders: [],
    }"
  />
</template>

With Persistence

When persist: true, VueFinder will save the current path to localStorage, allowing it to remember the last visited directory when the page is reloaded:

<template>
  <vue-finder
    id="persistent"
    :driver="driver"
    :config="{
      persist: true,
      initialPath: 'local://',
    }"
  />
</template>

UI Visibility Settings

You can control the visibility of the menu bar and toolbar using the showMenuBar and showToolbar config options. These are non-persistent options that reset to their default values (true) on page reload.

For detailed examples and usage, see the UI Visibility example.