Getting Started with the Vue File Manager Component in Vue 2

22 Jul 20266 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Vue File Manager component.

For Vue 3, see Getting Started with the Vue File Manager Component in Vue 3.

Prerequisites

Requirement Version
Vue 2.6 or higher
Node.js 16.0.0 or above

Vue supported versions

Vue version Minimum Syncfusion Vue File Manager version
Vue v2.7 20.3.47 and above
Vue v3.0 19.2.44 and above

Browser Support

Browser Supported versions
Chrome Latest
Firefox Latest
Opera Latest
Edge 13+
Internet Explorer (IE) 11+
Safari 9+
iOS Safari 9+
Android Browser / Chrome for Android 4.4+
Windows Mobile IE 11+

Setting up the Vue 2 project

Easily set up a Vue 2 application using Vue CLI, which provides a reliable development environment, a streamlined project structure, and optimized builds compared to older setup tools. For detailed steps, refer to the Vue CLI installation instructions.

Note: To create a Vue 2 application using Vue CLI, refer to this documentation for more details.

To create a new Vue 2 application, run the following commands based on your preferred package manager:

npm install -g @vue/cli
vue create quickstart

or

yarn global add @vue/cli
vue create quickstart

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → Default ([Vue 2] babel, eslint)
  • Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Navigate to the project directory:

cd quickstart

Add Syncfusion® Vue packages

To install the Vue File Manager component, use the following command:

npm install @syncfusion/ej2-vue-filemanager --save

or

yarn add @syncfusion/ej2-vue-filemanager

Import Syncfusion® CSS styles

Themes for Syncfusion® File Manager components can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following command:

npm install @syncfusion/ej2-material3-theme --save

Then add the following CSS reference to the src/App.vue file:

<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/file-manager/index.css";
</style>

The order of CSS imports matters. Import base styles first, then component-specific styles. Missing CSS imports can result in misaligned layouts, buttons without styling, or missing visual elements in popups and dialogs.

Add Syncfusion® Vue component

Replace the default contents of the src/App.vue file with the following code.

To enable file operation functionality in the File Manager, configure the url property within the ajaxSettings. This URL handles the file operation requests from the server.

<template>
    <div id="app">
        <ejs-filemanager id="file-manager" :ajaxSettings="ajaxSettings">
        </ejs-filemanager>
    </div>
</template>
<script>
import { FileManagerComponent } from "@syncfusion/ej2-vue-filemanager";

export default {
    name: "App",
    components: {
        "ejs-filemanager":FileManagerComponent
    },
    data () {
        return {
           ajaxSettings:
            {
                url: "https://physical-service.syncfusion.com/api/FileManager/FileOperations"
            }
        }
    }
}
</script>
<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/file-manager/index.css";
</style>

Server-side setup

The sample uses https://physical-service.syncfusion.com/api/FileManager/FileOperations as the url endpoint in ajaxSettings.

To use your own files, host a File Manager service and replace the url value with your service endpoint. See the File System Provider documentation for setup details.

Registering Your Syncfusion License

Generate a license key from the Syncfusion License Dashboard and register it before rendering your Vue 2 application:

```javascript
import { registerLicense } from '@syncfusion/ej2-base';

registerLicense('YOUR_LICENSE_KEY');
```

Note: A valid Syncfusion license is required for production use. Without a valid license, a trial license warning message will be displayed.

Run the project

npm run serve

or

yarn run serve

Production build

To create an optimized production build:

npm run build

Preview the production build locally by serving the generated dist folder with a static server:

npx serve dist

Troubleshooting

  • File Manager not rendering styles: Ensure the theme CSS is imported in src/App.vue and that you removed any default Vue CLI starter styles that may override the File Manager styles.
  • Trial license warning banner: Register a license key via registerLicense() from @syncfusion/ej2-base.
  • Port 8080 already in use: Stop the conflicting process or run the Vue CLI dev server on a different port with npm run serve -- --port 3000.

See also