0.0.47 • Public • Published


🗂 Vue component for browsing assets, items and files.


  • v-model: Object default: {}

    An object with data that the component will manipulate. Component will mutate this object if any operations allowed. Must have the following structure:

      dir1: {
        subdir: {},
        file1: 'content of file 1',
        file2: 'content of file 2'
      file3: 'content of file 3'
  • selectedItems.sync: Array default: []

    An array of selected items. Works when enableSelection is true.

  • enableSelection: Boolean default: false

    Enables possibility to select items in component.

  • multipleSelect: Boolean default: false

    Whether or not user can select multiple items. Works when enableSelection is true.

  • loadingPaths: Array default: []

    Whether or not the directory is in loading state. Add path to show spinner in directory.

    Limit for number of selected items. Use 0 for unlimited number of selected items. Works when enableSelection and multipleSelect is true.

  • allowOperations: Object default:

   copyPaste: true,
   createDirectory: true,
   createFile: true,
   delete: true,

Note: this restriction will not affect the methods that calls from this.$refs[componentRef]

  • isPreviewLoading: Boolean default: false

    Whether or not the preview part of component is in loading state. Set to true show spinner and disable navigation.

  • rootLabel: String default: '.'

    Label for root directory item in list


  • pathChange

    Emitted when browsing path changed.

    Handler called with new and old paths, e. g. { old: '/dir', new: '/dir/subdir' }

  • chevronClick

    Emitted when chevron near the directory clicked.

    Handler called with directory state and path, e. g. { path: '/dir', expanded: false }

  • fileClick

    Emitted when file clicked.

    Handler called with file content and path, e. g. { path: '/dir/file', content: 'some files' }

  • copy:

    Emitted when the copy operation performed.

  • paste:

    Emitted when the paste operation performed.

  • delete:

    Emitted when the delete operation performed.

  • cut:

    Emitted when the cut operation performed.

  • fileCreated:

    Emitted when user creates file

  • directoryCreated

    Emitted when user creates directory

  • fileEdited

    Emitted when the user edited file


  • previewer

    Holds previewer for files which represents files. Slot props contains content, which is currently selected item content and extension


  • resetPreview(): resets preview.
  • rename(path, newName): Renames file or directory
  • resetSelection(): Deselect all selected files.




Package Sidebar


npm i @onereach/or-browser

Weekly Downloads






Unpacked Size

82.1 kB

Total Files


Last publish


  • onereach.admin
  • onereach.user