Getting Started with the Vue Block Editor component in Vue 2

18 Nov 20183 minutes to read

This section explains how to create a simple Block Editor and configure its available functionalities in the Vue environment.

Prerequisites

System requirements for Syncfusion® Vue UI components

Create a Vue Application

To generate a Vue 2 project using Vue-CLI, use the vue create command. If Vue CLI is not installed yet, run the first command below.

npm install -g @vue/cli
vue create quickstart

or

yarn global add @vue/cli
vue create quickstart

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

Selecting the Vue 2 preset during project creation

Navigate to the project directory:

cd quickstart

Adding Syncfusion® Vue packages

All Syncfusion® Vue packages are published on npmjs.com. Install the Vue Block Editor package by running the following command:

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

or

yarn add @syncfusion/ej2-vue-blockeditor

Adding CSS reference

Syncfusion provides multiple themes for the Block Editor component. For a complete list of available themes, refer to the themes topic.

To apply the Tailwind 3 theme, install the corresponding theme package by using the following command:

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

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

<style>
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/blockeditor/index.css";
</style>

Adding Block Editor component

Follow the steps below to add the Vue Block Editor component using Composition API or Options API:

1. First, import and register the Block Editor component in the script section of the src/App.vue file. If you are using the Composition API, you should add the setup attribute to the script tag to indicate that Vue will be using the Composition API.

<script setup>
import { BlockEditorComponent as EjsBlockeditor  } from "@syncfusion/ej2-vue-blockeditor";
</script>
<script>
import { BlockEditorComponent  } from "@syncfusion/ej2-vue-blockeditor";
export default {
  components: {
    'ejs-blockeditor': BlockEditorComponent
  }
}
</script>

2. In the template section define the Block Editor component.

<template>
  <ejs-blockeditor></ejs-blockeditor>
</template>

The complete example below combines the previous steps into a single src/App.vue file.

<template>
  <ejs-blockeditor></ejs-blockeditor>
</template>

<script setup>
import { BlockEditorComponent as EjsBlockeditor } from '@syncfusion/ej2-vue-blockeditor';
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/blockeditor/index.css";
</style>
<template>
  <ejs-blockeditor></ejs-blockeditor>
</template>

<script>
import { BlockEditorComponent } from '@syncfusion/ej2-vue-blockeditor';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

export default {
  components: {
    "ejs-blockeditor": BlockEditorComponent
  }
}
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/blockeditor/index.css";
</style>

Run the application

Use the following command to run the application in the browser.

npm run serve

or

yarn run serve

For migrating from Vue 2 to Vue 3, refer to the migration documentation.