Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the ninja-forms domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6114
Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the simple-custom-post-order domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6114
Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the wp-mail-logging domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6114
Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the health-check domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6114
Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the updraftplus domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6114
Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the rocket domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6114 Developer Tutorial #4: Create Dashboard Widgets with Vue.js - NextcloudSkip to main content
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!
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.
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.
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!
“When we have welcoming communities of contributors, open source software gets better and more useful to everyone.” Limor Fried, Electrical Engineer, Inventor and Founder of open-source hardware company Adafruit We believe in this ideal and love to work with our community. We are always looking to involve more people in Nextcloud, bringing in their ideas, […]
In Nextcloud Hub 8, we introduced interactive widgets, a completely new mechanic that lets you share, access and interact with items from various apps in a compact widget format throughout your platform.
We save some cookies to count visitors and make the site easier to use. This doesn't leave our server and isn't to track you personally!
See our Privacy Policy for more information. Customize
Statistics cookies collect information anonymously and help us understand how our visitors use our website. We use cloud-hosted Matomo
Matomo
_pk_ses*: Counts the first visit of the user
_pk_id*: Helps not to double count the visits.
mtm_cookie_consent: Remembers that consent for storing and using cookies was given by the user.
_pk_ses*: 30 minutes
_pk_id*: 28 days
mtm_cookie_consent: 30 days