{"id":97282,"date":"2023-02-15T11:18:19","date_gmt":"2023-02-15T10:18:19","guid":{"rendered":"https:\/\/nextcloud.com\/?p=97282"},"modified":"2023-02-15T11:18:22","modified_gmt":"2023-02-15T10:18:22","slug":"developer-tutorial-4-create-dashboard-widgets-with-vue-js","status":"publish","type":"post","link":"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/","title":{"rendered":"Developer Tutorial #4: Create Dashboard Widgets with Vue.js"},"content":{"rendered":"\n<p class=\"has-text-align-center has-background\" style=\"background-color:#dbedf8\">Welcome to \u27a1\ufe0f part 4 of the Nextcloud Developer Tutorial Series! \ud83d\udee0\ufe0f<\/p>\n\n\n\n<p class=\"has-text-align-center\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nextcloud Dashboard<\/h2>\n\n\n\n<p>The Dashboard is where you start your day. You have your cup of coffee \u2615 or tea \ud83c\udf75 in hand, and are ready to start your work.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>There&#8217;s a whole variety of widgets to choose from, and with some practice you can even make your own!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/nextcloud.com\/wp-content\/uploads\/2022\/10\/dashboard-bg-4-light.png\"><img decoding=\"async\" width=\"5760\" height=\"3240\" src=\"https:\/\/nextcloud.com\/wp-content\/uploads\/2022\/10\/dashboard-bg-4-light.png\" alt=\"Dashboard on Nextcloud instance with 8 different widgits: upcoming events, talk mentions, upcoming cards, important mail, recommended files, upcoming tasks, recent activity and unread mail.\" class=\"wp-image-64724\" srcset=\"https:\/\/nextcloud.com\/c\/uploads\/2022\/10\/dashboard-bg-4-light.png 5760w, https:\/\/nextcloud.com\/c\/uploads\/2022\/10\/dashboard-bg-4-light-300x169.png 300w, https:\/\/nextcloud.com\/c\/uploads\/2022\/10\/dashboard-bg-4-light-1024x576.png 1024w, https:\/\/nextcloud.com\/c\/uploads\/2022\/10\/dashboard-bg-4-light-768x432.png 768w, https:\/\/nextcloud.com\/c\/uploads\/2022\/10\/dashboard-bg-4-light-1536x864.png 1536w, https:\/\/nextcloud.com\/c\/uploads\/2022\/10\/dashboard-bg-4-light-2048x1152.png 2048w\" sizes=\"(max-width: 5760px) 100vw, 5760px\" \/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"354\" height=\"576\" src=\"https:\/\/nextcloud.com\/wp-content\/uploads\/2023\/02\/1-354x576.png\" alt=\"\" class=\"wp-image-97766\" srcset=\"https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/1-354x576.png 354w, https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/1-184x300.png 184w, https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/1.png 421w\" sizes=\"(max-width: 354px) 100vw, 354px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"357\" height=\"576\" src=\"https:\/\/nextcloud.com\/wp-content\/uploads\/2023\/02\/2-357x576.png\" alt=\"\" class=\"wp-image-97771\" srcset=\"https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/2-357x576.png 357w, https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/2-186x300.png 186w, https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/2.png 421w\" sizes=\"(max-width: 357px) 100vw, 357px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"354\" height=\"576\" src=\"https:\/\/nextcloud.com\/wp-content\/uploads\/2023\/02\/3-354x576.png\" alt=\"\" class=\"wp-image-97776\" srcset=\"https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/3-354x576.png 354w, https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/3-185x300.png 185w, https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/3.png 419w\" sizes=\"(max-width: 354px) 100vw, 354px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Start Customizing your own Widget!<\/h2>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>Vue.js is mainly utilized for building user interfaces and single-page applications and is known to be a progressive and approachable framework. <a href=\"https:\/\/vuejs.org\/\">Learn more about Vue.js here<\/a>.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/nextcloud.com\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png\"><img decoding=\"async\" width=\"2878\" height=\"1646\" src=\"https:\/\/nextcloud.com\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png\" alt=\"View of widgits on Nextcloud dashboard with a photo of northern lights in the background.\" class=\"wp-image-97317\" srcset=\"https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png 2878w, https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34-300x172.png 300w, https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34-1007x576.png 1007w, https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34-768x439.png 768w, https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34-1536x878.png 1536w, https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34-2048x1171.png 2048w\" sizes=\"(max-width: 2878px) 100vw, 2878px\" \/><\/a><\/figure>\n\n\n\n<p>We hope you learn from and have fun with this tutorial!<\/p>\n\n\n\n<p>If you have any questions or want to share your new widget, post in the <a href=\"https:\/\/help.nextcloud.com\/t\/new-tutorial-creating-a-dashboard-widget-with-vue-js\/155406\" target=\"_blank\" rel=\"noreferrer noopener\">forums<\/a>!<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/cloud.nextcloud.com\/s\/iyNGp8ryWxc7Efa?dir=undefined&amp;path=%2F4%20Developing%20a%20dashboard%20widget%20with%20Vue.js&amp;openfile=7071750\" target=\"_blank\" rel=\"noreferrer noopener\">Start Tutorial Now!<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<section class=\"promo-section  \" id=\"\" style=\"\" data-expiration=\"\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-12\">\n\t\t\t\t<div class=\"text-block\">\n\t\t\t\t\t<h2>Check out all the developer tutorials! \ud83d\udc68\u200d\ud83d\udcbb\ud83d\udc69\u200d\ud83d\udcbb<\/h2><a class=\"c-btn btn-white\" href=\"https:\/\/cloud.nextcloud.com\/s\/iyNGp8ryWxc7Efa?path=%2F\" target=\"_blank\">Click here!<\/a>\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to \u27a1\ufe0f part 4 of the Nextcloud Developer Tutorial Series! \ud83d\udee0\ufe0f 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 [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":97317,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"publish_to_discourse":"","publish_post_category":"22","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"416426","discourse_permalink":"https:\/\/help.nextcloud.com\/t\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/155846","wpdc_publishing_response":"success","wpdc_publishing_error":"","footnotes":""},"categories":[49,5,11,6,292],"tags":[],"class_list":["post-97282","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-tuesday","category-apps","category-blog","category-community","category-developer-tutorials"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Developer Tutorial #4: Create Dashboard Widgets with Vue.js - Nextcloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Developer Tutorial #4: Create Dashboard Widgets with Vue.js - Nextcloud\" \/>\n<meta property=\"og:description\" content=\"Welcome to \u27a1\ufe0f part 4 of the Nextcloud Developer Tutorial Series! \ud83d\udee0\ufe0f 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 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Nextcloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Nextclouders\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-15T10:18:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-15T10:18:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/nextcloud.com\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2878\" \/>\n\t<meta property=\"og:image:height\" content=\"1646\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mikaela Schneider\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nextclouders\" \/>\n<meta name=\"twitter:site\" content=\"@nextclouders\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mikaela Schneider\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/\"},\"author\":{\"name\":\"Mikaela Schneider\",\"@id\":\"https:\/\/nextcloud.com\/nl\/#\/schema\/person\/ea95df24e6e3adc5f63c79555fa599f5\"},\"headline\":\"Developer Tutorial #4: Create Dashboard Widgets with Vue.js\",\"datePublished\":\"2023-02-15T10:18:19+00:00\",\"dateModified\":\"2023-02-15T10:18:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/\"},\"wordCount\":280,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/nextcloud.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png\",\"articleSection\":[\"App Tuesday\",\"Apps\",\"Blog\",\"Community\",\"Developer Tutorials\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/\",\"url\":\"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/\",\"name\":\"Developer Tutorial #4: Create Dashboard Widgets with Vue.js - Nextcloud\",\"isPartOf\":{\"@id\":\"https:\/\/nextcloud.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png\",\"datePublished\":\"2023-02-15T10:18:19+00:00\",\"dateModified\":\"2023-02-15T10:18:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#primaryimage\",\"url\":\"https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png\",\"contentUrl\":\"https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png\",\"width\":2878,\"height\":1646},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/nextcloud.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Developer Tutorial #4: Create Dashboard Widgets with Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/nextcloud.com\/nl\/#website\",\"url\":\"https:\/\/nextcloud.com\/nl\/\",\"name\":\"Nextcloud\",\"description\":\"Regain control over your data\",\"publisher\":{\"@id\":\"https:\/\/nextcloud.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/nextcloud.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/nextcloud.com\/nl\/#organization\",\"name\":\"Nextcloud\",\"url\":\"https:\/\/nextcloud.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/nextcloud.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/nextcloud.com\/c\/uploads\/2022\/10\/nextcloud-logo-blue-transparent.svg\",\"contentUrl\":\"https:\/\/nextcloud.com\/c\/uploads\/2022\/10\/nextcloud-logo-blue-transparent.svg\",\"width\":\"1024\",\"height\":\"1024\",\"caption\":\"Nextcloud\"},\"image\":{\"@id\":\"https:\/\/nextcloud.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Nextclouders\/\",\"https:\/\/x.com\/nextclouders\",\"https:\/\/www.linkedin.com\/company\/10827569\/\",\"https:\/\/youtube.com\/nextcloud\",\"https:\/\/www.instagram.com\/nextclouders\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/nextcloud.com\/nl\/#\/schema\/person\/ea95df24e6e3adc5f63c79555fa599f5\",\"name\":\"Mikaela Schneider\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/nextcloud.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9b0e9ca5948ab0ab4c0732dd1e79442d7b531e574a27757a9fbc4fad5f732b0f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9b0e9ca5948ab0ab4c0732dd1e79442d7b531e574a27757a9fbc4fad5f732b0f?s=96&d=mm&r=g\",\"caption\":\"Mikaela Schneider\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Developer Tutorial #4: Create Dashboard Widgets with Vue.js - Nextcloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/","og_locale":"nl_NL","og_type":"article","og_title":"Developer Tutorial #4: Create Dashboard Widgets with Vue.js - Nextcloud","og_description":"Welcome to \u27a1\ufe0f part 4 of the Nextcloud Developer Tutorial Series! \ud83d\udee0\ufe0f 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 [&hellip;]","og_url":"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/","og_site_name":"Nextcloud","article_publisher":"https:\/\/www.facebook.com\/Nextclouders\/","article_published_time":"2023-02-15T10:18:19+00:00","article_modified_time":"2023-02-15T10:18:22+00:00","og_image":[{"width":2878,"height":1646,"url":"https:\/\/nextcloud.com\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png","type":"image\/png"}],"author":"Mikaela Schneider","twitter_card":"summary_large_image","twitter_creator":"@nextclouders","twitter_site":"@nextclouders","twitter_misc":{"Geschreven door":"Mikaela Schneider","Geschatte leestijd":"1 minuut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#article","isPartOf":{"@id":"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/"},"author":{"name":"Mikaela Schneider","@id":"https:\/\/nextcloud.com\/nl\/#\/schema\/person\/ea95df24e6e3adc5f63c79555fa599f5"},"headline":"Developer Tutorial #4: Create Dashboard Widgets with Vue.js","datePublished":"2023-02-15T10:18:19+00:00","dateModified":"2023-02-15T10:18:22+00:00","mainEntityOfPage":{"@id":"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/"},"wordCount":280,"commentCount":0,"publisher":{"@id":"https:\/\/nextcloud.com\/nl\/#organization"},"image":{"@id":"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png","articleSection":["App Tuesday","Apps","Blog","Community","Developer Tutorials"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/","url":"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/","name":"Developer Tutorial #4: Create Dashboard Widgets with Vue.js - Nextcloud","isPartOf":{"@id":"https:\/\/nextcloud.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#primaryimage"},"image":{"@id":"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png","datePublished":"2023-02-15T10:18:19+00:00","dateModified":"2023-02-15T10:18:22+00:00","breadcrumb":{"@id":"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#primaryimage","url":"https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png","contentUrl":"https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png","width":2878,"height":1646},{"@type":"BreadcrumbList","@id":"https:\/\/nextcloud.com\/nl\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/nextcloud.com\/nl\/"},{"@type":"ListItem","position":2,"name":"Developer Tutorial #4: Create Dashboard Widgets with Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/nextcloud.com\/nl\/#website","url":"https:\/\/nextcloud.com\/nl\/","name":"Nextcloud","description":"Regain control over your data","publisher":{"@id":"https:\/\/nextcloud.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nextcloud.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/nextcloud.com\/nl\/#organization","name":"Nextcloud","url":"https:\/\/nextcloud.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/nextcloud.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/nextcloud.com\/c\/uploads\/2022\/10\/nextcloud-logo-blue-transparent.svg","contentUrl":"https:\/\/nextcloud.com\/c\/uploads\/2022\/10\/nextcloud-logo-blue-transparent.svg","width":"1024","height":"1024","caption":"Nextcloud"},"image":{"@id":"https:\/\/nextcloud.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Nextclouders\/","https:\/\/x.com\/nextclouders","https:\/\/www.linkedin.com\/company\/10827569\/","https:\/\/youtube.com\/nextcloud","https:\/\/www.instagram.com\/nextclouders\/"]},{"@type":"Person","@id":"https:\/\/nextcloud.com\/nl\/#\/schema\/person\/ea95df24e6e3adc5f63c79555fa599f5","name":"Mikaela Schneider","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/nextcloud.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9b0e9ca5948ab0ab4c0732dd1e79442d7b531e574a27757a9fbc4fad5f732b0f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9b0e9ca5948ab0ab4c0732dd1e79442d7b531e574a27757a9fbc4fad5f732b0f?s=96&d=mm&r=g","caption":"Mikaela Schneider"}}]}},"featured_media_url":"https:\/\/nextcloud.com\/c\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png","_links":{"self":[{"href":"https:\/\/nextcloud.com\/nl\/wp-json\/wp\/v2\/posts\/97282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nextcloud.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nextcloud.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nextcloud.com\/nl\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/nextcloud.com\/nl\/wp-json\/wp\/v2\/comments?post=97282"}],"version-history":[{"count":0,"href":"https:\/\/nextcloud.com\/nl\/wp-json\/wp\/v2\/posts\/97282\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nextcloud.com\/nl\/wp-json\/wp\/v2\/media\/97317"}],"wp:attachment":[{"href":"https:\/\/nextcloud.com\/nl\/wp-json\/wp\/v2\/media?parent=97282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nextcloud.com\/nl\/wp-json\/wp\/v2\/categories?post=97282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nextcloud.com\/nl\/wp-json\/wp\/v2\/tags?post=97282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}