Getting Started
16 Mar 20233 minutes to read
This section explains how to create a simple Image Editor, and configure its available
functionalities in Vue using Vue quickstart seed repository.
Dependencies
The following list of dependencies are required to use the Image Editor component in your application.
|-- @syncfusion/ej2-vue-image-editor
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-splitbuttons
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-dropdowns
Installation and configuration
You can use Vue CLI
to setup your vue applications.
To install Vue CLI use the following command.
npm install -g @vue/cli
npm install -g @vue/cli-init
Start a new project using below Vue CLI command.
vue init webpack-simple quickstart
cd quickstart
npm install
Install Syncfusion Image Editor
packages using below command.
npm install @syncfusion/ej2-vue-image-editor --save
Registering Image Editor component using Vue.use()
Import the Image Editor Plugin from the Essential JS 2 Vue package and register the same using Vue.use()
with Component Plugin as its argument.
Refer to the code snippet given below.
import Vue from 'vue';
import { ImageEditorPlugin } from "@syncfusion/ej2-vue-image-editor";
Vue.use(ImageEditorPlugin);
export default {}
By registering component plugin in Vue, all child directives are also globally registered. We can also use
Vue.Component()
to registerImage Editor
. Refer here to know more about component registration.
Initialize Image Editor
Add the EJ2 Vue Image Editor using <ejs-imageeditor>
to the <template>
section of the App.vue
file in src
directory.
<template>
<div>
<ejs-imageeditor id="image-editor"></ejs-imageeditor>
</div>
</template>
<script>
import Vue from 'vue';
import { ImageEditorPlugin } from "@syncfusion/ej2-vue-image-editor";
Vue.use(ImageEditorPlugin);
export default {
data: function() {
return {};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px;
height: 350px;
}
</style>
Run the application
Now run the npm run dev
command in the console, it will build your application and open in the browser.
The following example shows a basic Image Editor component.
<template>
<div>
<ejs-imageeditor id="image-editor" height="350px" width="550px"></ejs-imageeditor>
</div>
</template>
<script>
import Vue from 'vue';
import { ImageEditorPlugin } from "@syncfusion/ej2-vue-image-editor";
Vue.use(ImageEditorPlugin);
export default {
data: function() {
return {};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style>