Introducing the New Vue Skeleton Component
Tags: development, ui, vue, webdev
Published: 2022-10-31 03:50:56

---
title: Introducing the New Vue Skeleton Component
published: true
date: 2022-10-27 10:30:45 UTC
tags: development, ui, vue, webdev
canonical_url: https://www.syncfusion.com/blogs/post/introducing-the-new-vue-skeleton-component.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jishj4tbacup3w8luvgz.png
---

The Syncfusion [Vue UI component](https://www.syncfusion.com/vue-components "Vue UI Components Library") library is the only suite that you will ever need to build an application because it contains over 70 high-performance, lightweight, modular, and responsive UI components in a single package.

Now, it includes a new [Skeleton component](https://www.syncfusion.com/vue-components/vue-skeleton "Vue Skeleton component") as part of the [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3 Release") release.

Let’s explore the features of the new Vue Skeleton component and its UI design with code examples.

## Skeleton overview

The Skeleton component is a modern data loading indicator that shows a preview of the content. While the interface is loading data, the component displays a layout of how the content will appear with a shimmer effect. The user will be aware of the content layout and understand that the UI is loading, resulting in an improved user experience.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Vue-Skeleton-Component-1.gif" alt="Vue Skeleton Component" style="width:100%">

  <figcaption>Vue Skeleton Component</figcaption>

</figure>

## Use cases

The following are a few places where the Skeleton component can be a great fit:

- **Loading dynamic content on a page** : Users expect pages to load fast in news feeds and social media posts. However, such feeds do not always perform well since they contain unique content every time the page is visited. The Skeleton component can be extremely helpful in maintaining the page layout until the actual content is loaded.

- **Performing data operations in the background:** A grid control primarily involves data handling and may take some time to load data from a server. In this scenario, the Skeleton can maintain the layout while the server loads the data.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Vue-DataGrid-with-Skeleton-Component-1.gif" alt="Vue DataGrid with Skeleton Component" style="width:100%">

  <figcaption>Vue DataGrid with Skeleton Component</figcaption>

</figure>

**Note:** To see a loading indicator that is similar to the Skeleton component in a data grid, refer to the [Vue DataGrid Loading Animation demo.](https://ej2.syncfusion.com/vue/demos/#/bootstrap5/grid/loading-animation.html "Vue DataGrid Loading Animation demo")

## **Key features**

The Vue Skeleton component has built-in support for the following features:

- Different shapes.
- Multiple shimmer (animation) effects.
- Options to control its size and visibility.

### Shape options

We can display page content in various shapes depending on the use case. Therefore, the placeholder for such content should also match the content shapes. The built-in content shapes of the Skeleton component meet this requirement. The component supports the following content shapes:

- Circle
- Rectangle
- Square
- Text (represents a single line of text).
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Built-in-Content-Shapes-in-Vue-Skeleton-component-1.gif" alt="Built-in Content Shapes in Vue Skeleton component" style="width:100%">

  <figcaption>Built-in Content Shapes in Vue Skeleton component</figcaption>

</figure>

**Note:** For more details, refer to the [Vue Skeleton component default functionalities demo with different shapes](https://ej2.syncfusion.com/vue/demos/#/bootstrap5/skeleton/default.html "Vue Skeleton component default functionalities demo with different shapes").

### Shimmer effects

Different animation styles can fit the different types of pages you deliver, so we provided the following built-in shimmer (animation) effects:

- Wave
- Pulse
- Fade

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Shimmer-Effects-in-Vue-Skeleton-Component-1.gif" alt="Shimmer Effects in Vue Skeleton Component" style="width:100%">

  <figcaption>Shimmer Effects in Vue Skeleton Component</figcaption>

</figure>


**Note:** For more details, refer to the [Vue Skeleton animation demo](https://ej2.syncfusion.com/vue/demos/#/bootstrap5/skeleton/animation.html "Vue Skeleton animation demo").

### Size and visibility

To customize the Skeleton’s size and toggle between the actual content and the placeholder, the component provides the following properties:

- [height](https://ej2.syncfusion.com/vue/documentation/api/skeleton#height "height property of Vue Skeleton component"): Defines the height of rectangle and text shapes.
- [width](https://ej2.syncfusion.com/vue/documentation/api/skeleton#width "width property of Vue Skeleton component"): Defines the width of rectangle and text shapes, the side of the square shape, and the radius of the circle shape.
- [visible](https://ej2.syncfusion.com/vue/documentation/api/skeleton#visible "visible property of Vue Skeleton component"): Toggles the visibility of the Skeleton component.

### Ease of use

The Vue Skeleton component contains a minimal API for easy integration. You can easily add it to any element as a CSS component.

The Skeleton component size can be responsive or static, providing you more flexibility in creating the content layout.

## Getting started with the Vue Skeleton component

Now that we have seen the features of the Vue Skeleton component, let’s see the steps to configure it in your Vue 3 applications.

### Step 1: Create a Vue application.

First, ensure you have all the [prerequisites](https://ej2.syncfusion.com/vue/documentation/getting-started/vue3-tutorial/#prerequisites "Prerequisites for creating a Vue app") needed to run a Vue 3 app. Then, [create a Vue app using the Vue CLI](https://ej2.syncfusion.com/vue/documentation/getting-started/vue3-tutorial/#creating-vue-application-using-vue-cli "Creating Vue application using Vue CLI").

### Step 2: Add Syncfusion NPM packages to the app.

Syncfusion Vue packages are available in the [NPM](https://www.npmjs.com/~syncfusionorg "Syncfusion Vue packages on NPM") registry. To install the packages required for the Skeleton component, use the following command:

```
npm install @syncfusion/ej2-vue-notifications --save
```

### Step 3: Add CSS reference for Syncfusion Vue components.

Now, import the required CSS styles for the Skeleton component and dependency styles in the  **<style>**  section of the  **src/App.vue**  file. Refer to the following code.

```xml
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
</style>
```

### Step 4: Add the Syncfusion Vue Skeleton component to your app.

We have completed all the necessary configurations for rendering the Syncfusion Vue components. Now, let’s add the Skeleton component by following these steps:

1.Import the Skeleton component in the  **<script>** section of the  **src/App.vue** file.
```xml
<script>
  import { SkeletonComponent } from "@syncfusion/ej2-vue-notifications";
</script>
```
2.Register the Skeleton component in your app as shown in the following code.
```js
Import { SkeletonComponent } from ‘@syncfusion/ej2-vue-notifications’;
export default {
   name: “App”,
   components: {
       ‘ejs-skeleton’: SkeletonComponent
   }
}
```
3.Add the component definition in the template section.
```xml
<template>
 <div id='element'>
  <ejs-skeleton height='15px' width=’200px’></ejs-skeleton>
 </div>
</template>
```

Summarizing the above steps, update the  **src/App.vue**  file with the following code.

```xml
<template>
 <div id='element'>
  <ejs-skeleton height='15px' width=’200px’></ejs-skeleton>
 </div>
</template>
 
<script>
 import { SkeletonComponent } from '@syncfusion/ej2-vue-notifications';
 // Component Registration
 export default {
   name: "App",
   components: {
     'ejs-skeleton': SkeletonComponent
   }
 }
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
</style>
```

### Step 5: Run the app.

Finally, run the application using the following command.

```
npm run serve
```

Once the web server is loaded, you can find the following output by opening the Vue app in the browser at port **localhost:8080**. Also, you can easily customize the shape and shimmer effect using the [shape](https://ej2.syncfusion.com/vue/documentation/api/skeleton#shape "shape property of Vue Skeleton component") and [shimmerEffect](https://ej2.syncfusion.com/vue/documentation/api/skeleton#shimmereffect "shimmerEffect property of Vue Skeleton component") properties, respectively.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Integrating-the-Skeleton-Component-into-the-Vue-App-1.gif" alt="Integrating the Skeleton Component into the Vue App" style="width:100%">

  <figcaption>Integrating the Skeleton Component into the Vue App</figcaption>

</figure>

## Adding the Syncfusion Vue Skeleton as a CSS component

First, follow steps 1 through 3 in the previous section.

**Note:** You can also download and reference the Skeleton styles from our [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio/ "Syncfusion Vue Theme Studio").

Next, follow these steps to add the Vue Skeleton as a CSS component in your application:

1.Define the element for adding the Skeleton component.
```xml
<div id="skeleton "></div>
```
2.Add the CSS class “ **e-skeleton** ” to initialize the Vue Skeleton component in the element.
```xml
<div id= "skeleton" class="e-skeleton"></div>
```
3.To define the Skeleton shape, add the CSS class “ **e-skeleton-{shape}** “, where **{shape}** represents the shape name. For example, “ **e-skeleton-circle** ” is for a circle shape.
```xml
<div id="skeleton" class="e-skeleton e-skeleton-circle"></div>
```
4.To define the shimmer effect, add the CSS class “ **e-skeleton-{effect}** “, where **{effect}** represents the shimmer effect name. For example, “ **e-skeleton-wave** ” is for wave effect.
```xml
<div id="skeleton" class="e-skeleton e-skeleton-circle e-skeleton-wave"></div>
```
5.Now, add the styles for the height and width of the Skeleton component.
```xml
<div id="skeleton" class="e-skeleton e-skeleton-circle e-skeleton-wave" style="height:50px; width:50px;"></div>
```

Refer to the following code block for the CSS classes corresponding to all Skeleton shapes and shimmer effects.

```xml
<div style="width: 200px;display:inline-block;">
 <label> Circle with wave effect</Label>
  <div class="e-skeleton e-skeleton-circle e-shimmer-wave" style="height:50px;width:50px;"></div>
  <br/>
 <label> Square with wave effect</Label>
  <div class="e-skeleton e-skeleton-square e-shimmer-wave" style="height:50px;width:50px;"></div>
  <br/>
 <label> Text with wave effect</Label>
  <div class="e-skeleton e-skeleton-text e-shimmer-wave" style="height:15px;width:150px;"></div>
</div>
<div style="width: 200px;display:inline-block;">
 <label> Rectangle with wave effect</Label>
  <div class="e-skeleton e-skeleton-rectangle e-shimmer-wave" style="height:50px;width:150px;"></div>
  <br/>
 <label> Rectangle with fade effect</Label>
  <div class="e-skeleton e-skeleton-rectangle e-shimmer-fade" style="height:50px;width:150px;"></div>
  <br/>
 <label> Rectangle with pulse effect</Label>
  <div class="e-skeleton e-skeleton-rectangle e-shimmer-pulse" style="height:50px;width:150px;"></div>
  <br/>
</div>
```

### Run the application

Finally, run the application using the following command.

```
npm run serve
```

Once the web server is loaded, you can find the following output by opening the Vue app in the browser at port localhost:8080.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Adding-Syncfusion-Vue-Skeleton-as-a-CSS-Component-1.gif" alt="Adding Syncfusion Vue Skeleton as a CSS Component" style="width:100%">

  <figcaption>Adding Syncfusion Vue Skeleton as a CSS Component</figcaption>

</figure>

## References

For more details, refer to the [Vue Skeleton component demos](https://ej2.syncfusion.com/vue/demos/#/bootstrap5/skeleton/default.html "Vue Skeleton component demos") and [documentation](https://ej2.syncfusion.com/vue/documentation/skeleton/getting-started/ "Getting started with Vue Skeleton component").

## Supported platforms

The Skeleton component is also available in the following platforms.

<table style="height: 313px;" width="626">
<tbody>
<tr style="height: 24px;">
<td style="height: 24px;" width="209"><strong>Platform</strong></td>
<td style="height: 24px;" width="209"><strong>Live demo</strong></td>
<td style="height: 24px;" width="209"><strong>Documentation</strong></td>
</tr>
<tr style="height: 48px;">
<td style="height: 48px;" width="209"><a title="JavaScript Skeleton Control" href="https://www.syncfusion.com/javascript-ui-controls/js-skeleton" target="_blank" rel="noopener">JavaScript</a></td>
<td style="height: 48px;" width="209"><a title="JavaScript Skeleton demos" href="https://ej2.syncfusion.com/demos/#/material/skeleton/default.html" target="_blank" rel="noopener">JavaScript Skeleton demos</a></td>
<td style="height: 48px;" width="209"><a title="Getting started with JavaScript Skeleton control" href="https://ej2.syncfusion.com/documentation/skeleton/getting-started/" target="_blank" rel="noopener">Getting started with JavaScript Skeleton</a></td>
</tr>
<tr style="height: 48px;">
<td style="height: 48px;" width="209"><a title="Angular Skeleton Component" href="https://www.syncfusion.com/angular-components/angular-skeleton" target="_blank" rel="noopener">Angular</a></td>
<td style="height: 48px;" width="209"><a title="Angular Skeleton demos" href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/skeleton/default" target="_blank" rel="noopener">Angular Skeleton demos</a></td>
<td style="height: 48px;" width="209"><a title="Getting started with Angular Skeleton component" href="https://ej2.syncfusion.com/angular/documentation/skeleton/getting-started/" target="_blank" rel="noopener">Getting started with Angular Skeleton</a></td>
</tr>
<tr style="height: 49px;">
<td style="height: 49px;" width="209"><a title="React Skeleton Component" href="https://www.syncfusion.com/react-components/react-skeleton" target="_blank" rel="noopener">React</a></td>
<td style="height: 49px;" width="209"><a title="React Skeleton demos" href="https://ej2.syncfusion.com/react/demos/#/bootstrap5/skeleton/default.html" target="_blank" rel="noopener">React Skeleton demos</a></td>
<td style="height: 49px;" width="209"><a title="Getting started with React Skeleton component" href="https://ej2.syncfusion.com/react/documentation/skeleton/getting-started/" target="_blank" rel="noopener">Getting started with React Skeleton</a></td>
</tr>
<tr style="height: 48px;">
<td style="height: 48px;" width="209"><a title="ASP.NET Core Skeleton Control" href="https://www.syncfusion.com/aspnet-core-ui-controls/skeleton" target="_blank" rel="noopener">ASP.NET Core</a></td>
<td style="height: 48px;" width="209"><a title="ASP.NET Core Skeleton demos" href="https://ej2.syncfusion.com/aspnetcore/Skeleton/DefaultFunctionalities#/fluent" target="_blank" rel="noopener">ASP.NET Core Skeleton demos</a></td>
<td style="height: 48px;" width="209"><a title="Getting started with ASP.NET Core Skeleton Control" href="https://ej2.syncfusion.com/aspnetcore/documentation/skeleton/getting-started" target="_blank" rel="noopener">Getting started with ASP.NET Core Skeleton</a></td>
</tr>
<tr style="height: 48px;">
<td style="height: 48px;" width="209"><a title="ASP.NET MVC Skeleton Control" href="https://www.syncfusion.com/aspnet-mvc-ui-controls/skeleton" target="_blank" rel="noopener">ASP.NET MVC</a></td>
<td style="height: 48px;" width="209"><a title="ASP.NET MVC Skeleton demos" href="https://ej2.syncfusion.com/aspnetmvc/Skeleton/DefaultFunctionalities#/fluent" target="_blank" rel="noopener">ASP.NET MVC Skeleton demos</a></td>
<td style="height: 48px;" width="209"><a title="Getting Started with ASP.NET MVC Skeleton Control" href="https://ej2.syncfusion.com/aspnetmvc/documentation/skeleton/getting-started" target="_blank" rel="noopener">Getting Started with ASP.NET MVC Skeleton</a></td>
</tr>
<tr style="height: 48px;">
<td style="height: 48px;" width="209"><a title="Blazor Skeleton component" href="https://www.syncfusion.com/blazor-components/blazor-skeleton" target="_blank" rel="noopener">Blazor</a></td>
<td style="height: 48px;" width="209"><a title="Blazor Skeleton demos" href="https://blazor.syncfusion.com/demos/skeleton/defaultfunctionalities?theme=fluent" target="_blank" rel="noopener">Blazor Skeleton demos</a></td>
<td style="height: 48px;" width="209"><a title="Getting Started with Blazor Skeleton Component" href="https://blazor.syncfusion.com/documentation/skeleton/getting-started" target="_blank" rel="noopener">Getting started with Blazor Skeleton</a></td>
</tr>
</tbody>
</table>

## Conclusion

Thanks for reading! In this blog, we have seen the features of the new Syncfusion [Vue Skeleton](https://www.syncfusion.com/vue-components/vue-skeleton "Vue Skeleton") component that rolled out in the [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3 Release") release and the steps to getting started with it. Try out this component yourself and provide your feedback in the comments section below.

Also, check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v20.3.0.47 "Syncfusion Release Notes") and the [What’s New](https://www.syncfusion.com/products/whatsnew "Syncfusion What's New") pages to see the other features available in the 2022 Volume 3 release.

For existing customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out our available features.

You can also reach us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). As always, we are happy to assist you!

## Related blogs

- [Introducing Slot Template Support for Syncfusion Vue Components](https://www.syncfusion.com/blogs/post/introducing-slot-template-support-for-syncfusion-vue-components.aspx "Blog: Introducing Slot Template Support for Syncfusion Vue Components")
- [Syncfusion Vue Components are Compatible with Version 2.7](https://www.syncfusion.com/blogs/post/syncfusion-vue-components-are-compatible-with-version-2-7.aspx "Blog: Syncfusion Vue Components are Compatible with Version 2.7")
- [Vue Composition API vs. React Hooks](https://www.syncfusion.com/blogs/post/vue-composition-api-vs-react-hooks.aspx "Blog: Vue Composition API vs. React Hooks")
- [Can the Composition API Replace Vue Mixins?](https://www.syncfusion.com/blogs/post/can-the-composition-api-replace-vue-mixins.aspx "Blog: Can the Composition API Replace Vue Mixins?")