Getting Started with the Vue Spinner Component in Vue 2

25 Apr 20254 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 Spinner component using the Composition API / Options API.

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
npm run serve

or

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

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

Syncfusion® packages are available at npmjs.com. To use Vue components, install the required npm package.

Install the @syncfusion/ej2-vue-popups package by running the following command:

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

or

yarn add @syncfusion/ej2-vue-popups

Add Syncfusion® Vue component

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

1. First, import and register the Spinner 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 { onMounted } from 'vue';
import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-vue-popups';
</script>
<script>
import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-vue-popups';
</script>

Here is the summarized code for the above steps in the src/App.vue file:

<template>
  <div id="app">

  </div>
</template>

<script setup>
import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-vue-popups';
import { onMounted } from 'vue';

onMounted(() => {

  //createSpinner() method is used to create spinner
  createSpinner({
    // Specify the target for the spinner to show
    target: document.getElementById('app')
  });

  // showSpinner() will make the spinner visible
  showSpinner(document.getElementById('app'));

  setInterval(function () {
    // hideSpinner() method used hide spinner
    hideSpinner(document.getElementById('app'));
  }, 100000);
});

</script>

<style>
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>
<template>
  <div id="app">

  </div>
</template>

<script>
import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-vue-popups';

export default {
  name: 'app',
  mounted: function () {

    //createSpinner() method is used to create spinner
    createSpinner({
      // Specify the target for the spinner to show
      target: document.getElementById('app')
    });

    // showSpinner() will make the spinner visible
    showSpinner(document.getElementById('app'));

    setInterval(function () {
      // hideSpinner() method used hide spinner
      hideSpinner(document.getElementById('app'));
    }, 100000);
  }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>

Run the project

To run the project, use the following command:

npm run serve

or

yarn run serve