Search results

Getting started with Vue Spreadsheet component

14 Oct 2021 / 3 minutes to read

This section explains the steps to create a simple Spreadsheet control with basic features in Vue environment.

Dependencies

The following list of dependencies are required to use the Spreadsheet control in your application:

Copied to clipboard
|-- @syncfusion/ej2-vue-spreadsheet
    |-- @syncfusion/ej2-vue-base
        |-- @syncfusion/ej2-base
        |-- @syncfusion/ej2-dropdowns
        |-- @syncfusion/ej2-navigations
        |-- @syncfusion/ej2-grids

Setup Vue Environment

You can use Vue CLI to setup your vue applications. To install Vue CLI use the following commands.

Copied to clipboard
npm install -g @vue/cli
npm install -g @vue/cli-init

Create a Vue Application

Start a new Vue application using below Vue CLI command.

Copied to clipboard
vue init webpack-simple quickstart

cd quickstart
npm install

Adding Syncfusion Spreadsheet package

All the available Essential JS 2 packages are published in npmjs.com registry.

To install Spreadsheet control, use the following command

Copied to clipboard
npm install @syncfusion/ej2-vue-spreadsheet --save

The —save will instruct NPM to include the spreadsheet package inside of the dependencies section of the package.json.

Registering Spreadsheet Control

You can register the Spreadsheet control in your application by using the Vue.use().

Refer to the code example given below.

Copied to clipboard
import Vue from 'vue';
import { SpreadsheetPlugin } from '@syncfusion/ej2-vue-spreadsheet';

Vue.use(SpreadsheetPlugin);
export default {}

Registering SpreadsheetPlugin in vue, will register the Spreadsheet component along with its required child directives globally.

Adding CSS Reference

import components CSS as given below in style section of the App.vue file. Here Material theme is used for this sample.

Copied to clipboard
<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
  @import '../node_modules/@syncfusion/ej2-dropdowns/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-popups/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
  @import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
</style>

Adding Spreadsheet Control

Add the Vue Spreadsheet by using ejs-spreadsheet selector in template section of the App.vue file.

Copied to clipboard
<template>
  <ejs-spreadsheet> </ejs-spreadsheet>
</template>

<script>
import Vue from 'vue';
import { SpreadsheetPlugin } from '@syncfusion/ej2-vue-spreadsheet';

Vue.use(SpreadsheetPlugin);
export default { }
</script>

Run the application

The Vue Spreadsheet application is configured to compile and run the application in a browser. Use the following command to run the application.

Copied to clipboard
npm run dev
Source
Preview
app.vue
Copied to clipboard
<template>
   <ejs-spreadsheet></ejs-spreadsheet>
</template>

<script>
import Vue from "vue";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);
export default { }
</script>

<style>
 @import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-dropdowns/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-popups/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
 @import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

You can refer to our Vue Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our Vue Spreadsheet example that shows you how to present and manipulate data.

See Also