# Developer Tutorial #4: Create Dashboard Widgets with Vue.js

**URL:** <https://help.nextcloud.com/t/developer-tutorial-4-create-dashboard-widgets-with-vue-js/155846>\
**Category:** 📰 News\
**Created:** [February 15, 2023, 10:18am UTC](https://help.nextcloud.com/t/developer-tutorial-4-create-dashboard-widgets-with-vue-js/155846 "2023-02-15T10:18:20Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![system](https://help.nextcloud.com/user_avatar/help.nextcloud.com/system/32/29333_2.png) [@system](https://help.nextcloud.com/u/system)\
**Post date:** [February 15, 2023, 10:18am UTC](https://help.nextcloud.com/t/developer-tutorial-4-create-dashboard-widgets-with-vue-js/155846/1 "2023-02-15T10:18:20Z")

</div>

Originally published at: [https://nextcloud.com/blog/developer-tutorial-4-create-dashboard-widgets-with-vue-js/](https://nextcloud.com/blog/developer-tutorial-4-create-dashboard-widgets-with-vue-js/)

Welcome to ➡ part 4 of the Nextcloud Developer Tutorial Series! 🛠

The Developer Tutorial Series is a program where we help developers improve their coding skills by providing them the tools and step-by-step guides on a variety of topics to succeed.

## Nextcloud Dashboard

The Dashboard is where you start your day. You have your cup of coffee ☕ or tea 🍵 in hand, and are ready to start your work.

Who messaged you? Do you have an important email to answer? With Nextcloud Dashboard, you have a quick overview of everything happening in your Nextcloud and can get a productive head start to your day. It makes it easy to pick up where you left off on a project through the Deck widget, for example, or an upcoming Task.

There’s a whole variety of widgets to choose from, and with some practice you can even make your own!

 ![](https://nextcloud.com/wp-content/uploads/2022/10/dashboard-bg-4-light.png)

 ![](https://nextcloud.com/wp-content/uploads/2023/02/1-354x576.png)

 ![](https://nextcloud.com/wp-content/uploads/2023/02/2-357x576.png)

 ![](https://nextcloud.com/wp-content/uploads/2023/02/3-354x576.png)

## Start Customizing your own Widget!

Have an idea for a new widget on your dashboard? After completing our fourth tutorial, you will know how to create widgets in Vue.js, an open source, front-end JavaScript model.

Vue.js is mainly utilized for building user interfaces and single-page applications and is known to be a progressive and approachable framework. [Learn more about Vue.js here](https://vuejs.org/).

In the written tutorial, we first teach you how to create a simple dashboard widget using pure (or vanilla) Javascript and then you will learn how to do it successfully on Vue.js.

 ![](https://nextcloud.com/wp-content/uploads/2023/02/Screenshot-2023-02-09-at-12.54.34.png)

We hope you learn from and have fun with this tutorial!

If you have any questions or want to share your new widget, post in the [forums](https://help.nextcloud.com/t/new-tutorial-creating-a-dashboard-widget-with-vue-js/155406)!

[Start Tutorial Now!](https://cloud.nextcloud.com/s/iyNGp8ryWxc7Efa?dir=undefined&path=%2F4%20Developing%20a%20dashboard%20widget%20with%20Vue.js&openfile=7071750)

## Check out all the developer tutorials! 👨‍💻👩‍💻

[Click here!](https://cloud.nextcloud.com/s/iyNGp8ryWxc7Efa?path=%2F)

---

<div class="post-metadata">

**Author:** ![wwe](https://help.nextcloud.com/user_avatar/help.nextcloud.com/wwe/32/72963_2.png) [@wwe](https://help.nextcloud.com/u/wwe)\
**Post date:** [January 16, 2025, 7:13am UTC](https://help.nextcloud.com/t/developer-tutorial-4-create-dashboard-widgets-with-vue-js/155846/2 "2025-01-16T07:13:24Z")

</div>