Syncfusion AI Assistant

How can I help you?

Getting Started with the Vue File Manager Component in Vue 2

20 May 20263 minutes to read

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

Prerequisites

System requirements for Syncfusion® Vue UI components

Setting up the Vue 2 project

To generate a Vue 2 project using Vue-CLI, use the vue create command. Follow these steps to install Vue CLI and create a new project:

npm install -g @vue/cli
vue create quickstart
cd quickstart

or

yarn global add @vue/cli
vue create quickstart
cd quickstart

When creating a new project, choose the option Default ([Vue 2] babel, eslint) from the menu.

Vue 2 project

Once the quickstart project is set up with default settings, proceed to add Syncfusion® components to the project.

Add Syncfusion® Vue packages

To install the 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

The following CSS files are available in the ../node_modules/@syncfusion package folder. Add these as references in src/App.vue.

<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-icons/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-popups/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-navigations/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-layouts/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-grids/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-vue-filemanager/styles/material3.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

The File Manager code should be placed in the src/App.vue file.

<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://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
            }
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-icons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-layouts/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-filemanager/styles/material3.css";
</style>

Run the project

npm run serve

or

yarn run serve

See also