Getting started

This page describes how to start with Vue File Manager widget by adding File Manager to your Vue application.

Step 1. Install the package

SVAR FileManager is an open-source library distributed under the MIT license.

Install package from NPM.

npm install @svar-ui/vue-filemanager

Step 2. Create and initialize Filemanager

Import the Filemanager component to your project:

<script setup>
  import { Filemanager } from "@svar-ui/vue-filemanager";
</script>

Initialize the Filemanager properties.

The example below creates the File Manager with two folders and three files. The data array holds the files structure, paths to the items, creation dates and the sizes of items. Do not forget to define the data component inside the Filemanager tag.

<script setup>
  import { Filemanager } from "@svar-ui/vue-filemanager";

  const rawdata = [
    {
      id: "/Code",
      size: 4096,
      date: new Date(2023, 11, 2, 17, 25),
      type: "folder",
    },
    {
      id: "/Music",
      size: 4096,
      date: new Date(2023, 11, 1, 14, 45),
      type: "folder",
    },

    {
      id: "/Info.txt",
      size: 1000,
      date: new Date(2023, 10, 30, 6, 13),
      type: "file",
    },
    {
      //parent: "/Code/Datepicker",
      id: "/Code/Datepicker/Year.vue",
      size: 1595,
      date: new Date(2023, 11, 7, 15, 23),
      type: "file",
    },
    {
      id: "/Pictures/162822515312968813.png",
      size: 510885,
      date: new Date(2023, 11, 1, 14, 45),
      type: "file",
    },
  ];
</script>

<template>
  <Filemanager
   :data="rawdata"
  />
</template>

For more information about loading data, see: Loading data.

Step 3. Apply a theme

To give some look and feel to the application, import one of the predefined themes, which will also make all elements display correctly:

• Willow
• WillowDark

<script setup>
    import { Willow } from "@svar-ui/vue-filemanager"; 
</script>

Apply the desired theme by wrapping Filemanager into the required theme tag and importing the widget's css file:

<script setup>
 import { Filemanager } from "@svar-ui/vue-filemanager";
 import { getData } from "./common/data";
 import { Willow } from "@svar-ui/vue-filemanager";
 import "@svar-ui/vue-filemanager/all.css"; //import css file from the package
</script>

<template>
  <Willow>
    <Filemanager :data="getData()" />
  </Willow>
</template>

What's next

Now you can dive deeper into the File Manager API and configure it to your needs:

• Guides pages where you can learn about styling, loading data, and other helpful tips to go smoothly with the File Manager configuration
• File Manager API with the description of all functionality
• Helpers such as RestDataProvider will make the process of working with backend easy and enjoyable