{"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:\/\/staging.nextcloud.com\/it\/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:\/\/staging.nextcloud.com\/wp-content\/uploads\/2022\/10\/dashboard-bg-4-light.png 5760w, https:\/\/staging.nextcloud.com\/wp-content\/uploads\/2022\/10\/dashboard-bg-4-light-300x169.png 300w, https:\/\/staging.nextcloud.com\/wp-content\/uploads\/2022\/10\/dashboard-bg-4-light-1024x576.png 1024w, https:\/\/staging.nextcloud.com\/wp-content\/uploads\/2022\/10\/dashboard-bg-4-light-768x432.png 768w, https:\/\/staging.nextcloud.com\/wp-content\/uploads\/2022\/10\/dashboard-bg-4-light-1536x864.png 1536w, https:\/\/staging.nextcloud.com\/wp-content\/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:\/\/staging.nextcloud.com\/wp-content\/uploads\/2023\/02\/1-354x576.png 354w, https:\/\/staging.nextcloud.com\/wp-content\/uploads\/2023\/02\/1-184x300.png 184w, https:\/\/staging.nextcloud.com\/wp-content\/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:\/\/staging.nextcloud.com\/wp-content\/uploads\/2023\/02\/2-357x576.png 357w, https:\/\/staging.nextcloud.com\/wp-content\/uploads\/2023\/02\/2-186x300.png 186w, https:\/\/staging.nextcloud.com\/wp-content\/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:\/\/staging.nextcloud.com\/wp-content\/uploads\/2023\/02\/3-354x576.png 354w, https:\/\/staging.nextcloud.com\/wp-content\/uploads\/2023\/02\/3-185x300.png 185w, https:\/\/staging.nextcloud.com\/wp-content\/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:\/\/staging.nextcloud.com\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png 2878w, https:\/\/staging.nextcloud.com\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34-300x172.png 300w, https:\/\/staging.nextcloud.com\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34-1007x576.png 1007w, https:\/\/staging.nextcloud.com\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34-768x439.png 768w, https:\/\/staging.nextcloud.com\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34-1536x878.png 1536w, https:\/\/staging.nextcloud.com\/wp-content\/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,"footnotes":""},"categories":[49,5,11,6,292,243],"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","category-uncategorized-2"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - 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=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\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:\/\/staging.nextcloud.com\/it\/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:\/\/staging.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=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mikaela Schneider\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/blog\\\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/blog\\\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\\\/\"},\"author\":{\"name\":\"Mikaela Schneider\",\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/#\\\/schema\\\/person\\\/8b00c7d4313f1ecb465e6785204ffb4b\"},\"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:\\\/\\\/staging.nextcloud.com\\\/it\\\/blog\\\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\\\/\"},\"wordCount\":280,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/blog\\\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/staging.nextcloud.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Screenshot-2023-02-09-at-12.54.34.png\",\"articleSection\":[\"App Tuesday\",\"Apps\",\"Blog\",\"Community\",\"Developer Tutorials\",\"Uncategorized\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/blog\\\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/blog\\\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\\\/\",\"url\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/blog\\\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\\\/\",\"name\":\"Developer Tutorial #4: Create Dashboard Widgets with Vue.js - Nextcloud\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/blog\\\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/blog\\\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/staging.nextcloud.com\\\/wp-content\\\/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:\\\/\\\/staging.nextcloud.com\\\/it\\\/blog\\\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/blog\\\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/blog\\\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/staging.nextcloud.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Screenshot-2023-02-09-at-12.54.34.png\",\"contentUrl\":\"https:\\\/\\\/staging.nextcloud.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Screenshot-2023-02-09-at-12.54.34.png\",\"width\":2878,\"height\":1646},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/blog\\\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Developer Tutorial #4: Create Dashboard Widgets with Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/\",\"name\":\"Nextcloud\",\"description\":\"Regain control over your data\",\"publisher\":{\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/#organization\",\"name\":\"Nextcloud\",\"url\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/staging.nextcloud.com\\\/c\\\/uploads\\\/2022\\\/10\\\/nextcloud-logo-blue-transparent.svg\",\"contentUrl\":\"https:\\\/\\\/staging.nextcloud.com\\\/c\\\/uploads\\\/2022\\\/10\\\/nextcloud-logo-blue-transparent.svg\",\"width\":\"1024\",\"height\":\"1024\",\"caption\":\"Nextcloud\"},\"image\":{\"@id\":\"https:\\\/\\\/staging.nextcloud.com\\\/it\\\/#\\\/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:\\\/\\\/staging.nextcloud.com\\\/it\\\/#\\\/schema\\\/person\\\/8b00c7d4313f1ecb465e6785204ffb4b\",\"name\":\"Mikaela Schneider\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9b0e9ca5948ab0ab4c0732dd1e79442d7b531e574a27757a9fbc4fad5f732b0f?s=96&d=mm&r=g\",\"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":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"it_IT","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:\/\/staging.nextcloud.com\/it\/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:\/\/staging.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":{"Scritto da":"Mikaela Schneider","Tempo di lettura stimato":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/staging.nextcloud.com\/it\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#article","isPartOf":{"@id":"https:\/\/staging.nextcloud.com\/it\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/"},"author":{"name":"Mikaela Schneider","@id":"https:\/\/staging.nextcloud.com\/it\/#\/schema\/person\/8b00c7d4313f1ecb465e6785204ffb4b"},"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:\/\/staging.nextcloud.com\/it\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/"},"wordCount":280,"commentCount":0,"publisher":{"@id":"https:\/\/staging.nextcloud.com\/it\/#organization"},"image":{"@id":"https:\/\/staging.nextcloud.com\/it\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/staging.nextcloud.com\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png","articleSection":["App Tuesday","Apps","Blog","Community","Developer Tutorials","Uncategorized"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/staging.nextcloud.com\/it\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/staging.nextcloud.com\/it\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/","url":"https:\/\/staging.nextcloud.com\/it\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/","name":"Developer Tutorial #4: Create Dashboard Widgets with Vue.js - Nextcloud","isPartOf":{"@id":"https:\/\/staging.nextcloud.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/staging.nextcloud.com\/it\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#primaryimage"},"image":{"@id":"https:\/\/staging.nextcloud.com\/it\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/staging.nextcloud.com\/wp-content\/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:\/\/staging.nextcloud.com\/it\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/staging.nextcloud.com\/it\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/staging.nextcloud.com\/it\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#primaryimage","url":"https:\/\/staging.nextcloud.com\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png","contentUrl":"https:\/\/staging.nextcloud.com\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png","width":2878,"height":1646},{"@type":"BreadcrumbList","@id":"https:\/\/staging.nextcloud.com\/it\/blog\/developer-tutorial-4-create-dashboard-widgets-with-vue-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/staging.nextcloud.com\/it\/"},{"@type":"ListItem","position":2,"name":"Developer Tutorial #4: Create Dashboard Widgets with Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/staging.nextcloud.com\/it\/#website","url":"https:\/\/staging.nextcloud.com\/it\/","name":"Nextcloud","description":"Regain control over your data","publisher":{"@id":"https:\/\/staging.nextcloud.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/staging.nextcloud.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/staging.nextcloud.com\/it\/#organization","name":"Nextcloud","url":"https:\/\/staging.nextcloud.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/staging.nextcloud.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/staging.nextcloud.com\/c\/uploads\/2022\/10\/nextcloud-logo-blue-transparent.svg","contentUrl":"https:\/\/staging.nextcloud.com\/c\/uploads\/2022\/10\/nextcloud-logo-blue-transparent.svg","width":"1024","height":"1024","caption":"Nextcloud"},"image":{"@id":"https:\/\/staging.nextcloud.com\/it\/#\/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:\/\/staging.nextcloud.com\/it\/#\/schema\/person\/8b00c7d4313f1ecb465e6785204ffb4b","name":"Mikaela Schneider","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/9b0e9ca5948ab0ab4c0732dd1e79442d7b531e574a27757a9fbc4fad5f732b0f?s=96&d=mm&r=g","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:\/\/staging.nextcloud.com\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-09-at-12.54.34.png","_links":{"self":[{"href":"https:\/\/staging.nextcloud.com\/it\/wp-json\/wp\/v2\/posts\/97282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.nextcloud.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.nextcloud.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.nextcloud.com\/it\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.nextcloud.com\/it\/wp-json\/wp\/v2\/comments?post=97282"}],"version-history":[{"count":26,"href":"https:\/\/staging.nextcloud.com\/it\/wp-json\/wp\/v2\/posts\/97282\/revisions"}],"predecessor-version":[{"id":97918,"href":"https:\/\/staging.nextcloud.com\/it\/wp-json\/wp\/v2\/posts\/97282\/revisions\/97918"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.nextcloud.com\/it\/wp-json\/wp\/v2\/media\/97317"}],"wp:attachment":[{"href":"https:\/\/staging.nextcloud.com\/it\/wp-json\/wp\/v2\/media?parent=97282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.nextcloud.com\/it\/wp-json\/wp\/v2\/categories?post=97282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.nextcloud.com\/it\/wp-json\/wp\/v2\/tags?post=97282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}