{"id":5050,"date":"2017-07-05T13:43:22","date_gmt":"2017-07-05T13:43:22","guid":{"rendered":"https:\/\/staging.heliossolutions.co\/blog\/?p=5050"},"modified":"2018-10-23T09:15:41","modified_gmt":"2018-10-23T09:15:41","slug":"drupal-vue-js-playing-together-craft-rich-web-experiences","status":"publish","type":"post","link":"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/","title":{"rendered":"Drupal and Vue.js: Playing Together to Craft Rich Web Experiences"},"content":{"rendered":"<p dir=\"ltr\">Building a new website? You may want to embark on a project with decoupled architecture; thanks to the hype around it. And why not, the evolution of websites into more <strong>interactive web applications<\/strong> demands the migration towards <strong>decoupled architecture<\/strong>.<\/p>\n<p dir=\"ltr\"><a title=\"Drupal and Vue.js: Playing Together to Craft Rich Web Experiences\" href=\"https:\/\/www.heliossolutions.in\/technology\/drupal-web-design-agency\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5052\" style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/drupal-vuejsfrontend-development.jpg\" alt=\"drupal vuejs(frontend development)\" width=\"632\" height=\"369\" srcset=\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/drupal-vuejsfrontend-development.jpg 697w, https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/drupal-vuejsfrontend-development-300x175.jpg 300w\" sizes=\"auto, (max-width: 632px) 100vw, 632px\" \/><\/a><\/p>\n<p dir=\"ltr\">As <strong>RESTful<\/strong> <strong>Web services module<\/strong> is included in <strong>Drupal 8 core<\/strong>, it can essentially function as an API-first back end. Being a\u00a0<strong><a title=\"Drupal Development Agency\" href=\"https:\/\/www.heliossolutions.in\/technology\/drupal-web-design-agency\/\" target=\"_blank\" rel=\"noopener\">Drupal Development Agency<\/a>,<\/strong> we would love to leverage Drupal 8 in decoupled architecture.<\/p>\n<h2 dir=\"ltr\">What is decoupled Drupal?<\/h2>\n<p dir=\"ltr\">When you employ a different front-end rather than using Drupal\u2019s own built in front-end, it is called decoupled Drupal. Usually a JavaScript framework or native application framework is deployed for the front end. This JS framework uses popular HTTP methods such as <strong>GET<\/strong>, <strong>POST<\/strong>, <strong>PATCH<\/strong> and <strong>DELETE<\/strong> to coordinate with Drupal via RESTful API.<\/p>\n<p dir=\"ltr\">The figure below depicts the differences between traditional and decoupled architectural pattern. The decoupled pattern leverages client-side frameworks like <strong>Vue.js<\/strong> (that we will discuss later in this post) in order to fulfill the demand of multi-channel publishing or creating more interactive web applications.<\/p>\n<p dir=\"ltr\" style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-5059 aligncenter\" src=\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/Decoupled_Drupal.jpg\" alt=\"Decoupled_Drupal\" width=\"600\" height=\"252\" srcset=\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/Decoupled_Drupal.jpg 600w, https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/Decoupled_Drupal-300x126.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<h2 dir=\"ltr\">Benefits of decoupled Drupal<\/h2>\n<ul>\n<li>It addresses the common concern that structured data should be separate from presentational information by creating separate concerns.<\/li>\n<li>Enables content syndication, i.e., you can write content once and publish everywhere.<\/li>\n<li>Allows differentiated velocities between development different development arenas &#8211; front-end and back end. It also allows front-end redesigns independently.<\/li>\n<li>It rewards rich application ecosystem applications such as SPAs, native mobile, and IoT.<\/li>\n<\/ul>\n<h2 dir=\"ltr\">When should you use decoupled Drupal?<\/h2>\n<ul>\n<li>If your site is powering one or more other sites.<\/li>\n<li>If your site is powering more than one applications.<\/li>\n<li>If your site is powering multiple sites or applications.<\/li>\n<\/ul>\n<h2 dir=\"ltr\">When should you not decouple Drupal?<\/h2>\n<p dir=\"ltr\">You do not need the overhead of a <strong>decoupled architecture<\/strong> to power a standalone site or application.<\/p>\n<p dir=\"ltr\">If you use decoupled Drupal, it can lead to workarounds that duplicate, interrupt or otherwise obfuscate the integrity of end-to-end Drupal.<\/p>\n<p>Now we would take a look at <strong>Drupal 8<\/strong> with<strong> Vue.js development<\/strong>, the newer way to decouple Drupal. In other words, we would take a look at how we can harness the power of Drupal as a CMS along with another front-end framework, Vue.js via progressive decoupling.<\/p>\n<h2 dir=\"ltr\">Why progressively decouple Drupal?<\/h2>\n<p dir=\"ltr\">In progressive decoupling, rather than using the JavaScript framework (Vue.js, in this case) on its own (as in fully decoupled Drupal) we would interpolate <strong>Vue.js into<\/strong> <strong>Drupal\u2019s front end<\/strong>. Thus, allowing REST API to serve as a means of communication between Vue.js (within Drupal\u2019s front end) with Drupal itself.<\/p>\n<p dir=\"ltr\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5054\" style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/Progressively-decoupled-Drupal.jpg\" alt=\"Progressively decoupled Drupal\" width=\"600\" height=\"252\" srcset=\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/Progressively-decoupled-Drupal.jpg 600w, https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/Progressively-decoupled-Drupal-300x126.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<h2 dir=\"ltr\">What are the rewards of progressively decoupled Drupal?<\/h2>\n<p dir=\"ltr\">Before we answer this question, you would need to ask these questions!<\/p>\n<h3 dir=\"ltr\">Ask yourself first:<\/h3>\n<ul>\n<li>Would you like to manipulate layout and display management without the aid of a developer?<\/li>\n<li>Do you need in-place and contextual editing of content?<\/li>\n<li>Would you like to use modules to add new features to the front-end with no development?<\/li>\n<li>Do you want to bring the benefits of cache tags and BigPipe Progressive Page loading to your site?<\/li>\n<li>Do you want the system errors or notifications while browsing the site?<\/li>\n<li>Do you want a unified administration toolbar while viewing the website?<\/li>\n<\/ul>\n<p>If you answer any of the questions in \u201cyes\u201d or \u201cmay be\u201d then you need to decouple Drupal progressively. To understand it in a clear manner, you would need to know first, what are the risks of fully decoupled Drupal.<\/p>\n<h3>Pitfalls of decoupled Drupal<\/h3>\n<ul>\n<li>When you are hosting another application on Drupal, you are introducing additional points of failure.<\/li>\n<li>No cross-site scripting or input sanitization which Drupal automatically provides out-of-the-box.<\/li>\n<li>No in-place and in-context editing or administration which would certainly bother your content editors.<\/li>\n<li>You would no longer able to view the preview of our content workflow.<\/li>\n<li>The default flexibility of layout and display management would be lost.<\/li>\n<li>Modules affecting the front-end would be lost completely.<\/li>\n<li>When you use Drupal as solely back end, you would not receive system notifications or error messages.<\/li>\n<li>You will lose the accessible markup or user experience benefits while using fully decoupled Drupal.<\/li>\n<li>And the most crucial one, you would miss the most compelling feature of Drupal 8 \u2013 BigPipe progressive loading or cache tags.<\/li>\n<\/ul>\n<p style=\"text-align: left;\">Therefore, to avoid these aforementioned risks of fully decoupled Drupal and reinventing the many wheels that default Drupal CMS provides, we prefer to use progressively decoupled Drupal.<\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5053\" style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/Fully-decoupled-Drupal.jpg\" alt=\"Fully decoupled Drupal\" width=\"600\" height=\"252\" srcset=\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/Fully-decoupled-Drupal.jpg 600w, https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/Fully-decoupled-Drupal-300x126.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p dir=\"ltr\">Now, let us explain why we are keen on using Vue.js layered on top of Drupal 8 to add the client-side interactivity along with Drupal\u2019s HTML.<\/p>\n<h2 dir=\"ltr\">Why Vue.js?<\/h2>\n<p dir=\"ltr\">Modern web users expect more dynamic and interactive experiences than a decade ago and jQuery in Drupal does not suffice this needs. Moreover, we chose Vue.js over other popular JavaScript frameworks because:<\/p>\n<ul>\n<li>\u201cVue.js is a more flexible and less opinionated solution\u201d, according to Evan you, the owner of Vue.js.<\/li>\n<li>It is lightweight and easy to learn.<\/li>\n<li>It has been learning from the mistakes and successes of other JS frameworks like Angular and React.<\/li>\n<li>It has two-way data binding feature like Angular and <strong>Virtual DOM<\/strong> like <strong>React<\/strong>.<\/li>\n<li>It follows component-oriented development style with modern tooling and supporting libraries.<\/li>\n<li>It has a gentler learning curve.<\/li>\n<\/ul>\n<h2 dir=\"ltr\">Getting started with Vue.js<\/h2>\n<p dir=\"ltr\">You can get started with Vue.js in many ways and one of the simplest ways is to create an index.html file and include Vue with:<\/p>\n<pre class=\"lang:default decode:true\">&lt;script src=\"https:\/\/unpkg.com\/vue\"&gt;&lt;\/script&gt;<\/pre>\n<p>Using npm package or the Drupal module are other ways.<\/p>\n<h2 dir=\"ltr\">Reactive Vue.js components<\/h2>\n<p dir=\"ltr\">The component system in Vue.js is an awesome concept and one of the most powerful features which allows JavaScript developers to build large-scale applications comprising small and self-contained components that are often reusable.<\/p>\n<p dir=\"ltr\">The Vue.js community offers a lot of important\u00a0<a href=\"https:\/\/vuejs.org\/v2\/guide\/components.html\" rel=\"nofollow\">components<\/a> which you can use in your development.<\/p>\n<p dir=\"ltr\">Vue.js has yet more compelling features but they are beyond the scope of this post, do let us know if you are interested to know more about it.<\/p>\n<h2 dir=\"ltr\">Wrapping up<\/h2>\n<p dir=\"ltr\">Hope, we were able to convey this message that now you have a spectrum of choices on how you want to use Drupal based on the needs of your organization.<\/p>\n<p>Are you ready for building more interactive web experiences for your users with decoupled Drupal?\u00a0<strong><a href=\"https:\/\/www.heliossolutions.in\/contact-us\/\">Please feel free to share<\/a><\/strong> your unique needs with us; our team of Drupal experts would reach out to you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Building a new website? You may want to embark on a project with decoupled architecture; thanks to the hype around\u2026<\/p>\n","protected":false},"author":3,"featured_media":5052,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[89,864],"tags":[892,891,894,893,425],"class_list":["post-5050","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-drupal","category-uxui","tag-drupal-8-with-vuejs-development","tag-drupal-development-agency","tag-drupal-frontend-development-with-vue-js","tag-drupal-web-services-with-vue-js","tag-outsourcing-drupal-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Drupal and Vue.js: Playing Together to Craft Rich Web Experiences<\/title>\n<meta name=\"description\" content=\"Want to create more interactive web experiences? Here\u2019s how Drupal Development Experts are building with Drupal and Vue.js.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Drupal and Vue.js: Playing Together to Craft Rich Web Experiences\" \/>\n<meta property=\"og:description\" content=\"Want to create more interactive web experiences? Here\u2019s how Drupal Development Experts are building with Drupal and Vue.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/\" \/>\n<meta property=\"og:site_name\" content=\"Helios Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-05T13:43:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-10-23T09:15:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/drupal-vuejsfrontend-development.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"697\" \/>\n\t<meta property=\"og:image:height\" content=\"407\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"helios\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"helios\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/\"},\"author\":{\"name\":\"helios\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/person\/ce1ab8197db1f84358e99b203e8f6b38\"},\"headline\":\"Drupal and Vue.js: Playing Together to Craft Rich Web Experiences\",\"datePublished\":\"2017-07-05T13:43:22+00:00\",\"dateModified\":\"2018-10-23T09:15:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/\"},\"wordCount\":1065,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/drupal-vuejsfrontend-development.jpg\",\"keywords\":[\"Drupal 8 with Vuejs Development\",\"Drupal Development Agency\",\"Drupal Frontend Development with Vue.js\",\"Drupal Web Services with Vue.js\",\"Outsourcing Drupal Development\"],\"articleSection\":[\"Drupal\",\"UX\/UI\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/\",\"url\":\"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/\",\"name\":\"Drupal and Vue.js: Playing Together to Craft Rich Web Experiences\",\"isPartOf\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/drupal-vuejsfrontend-development.jpg\",\"datePublished\":\"2017-07-05T13:43:22+00:00\",\"dateModified\":\"2018-10-23T09:15:41+00:00\",\"description\":\"Want to create more interactive web experiences? Here\u2019s how Drupal Development Experts are building with Drupal and Vue.js.\",\"breadcrumb\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#primaryimage\",\"url\":\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/drupal-vuejsfrontend-development.jpg\",\"contentUrl\":\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/drupal-vuejsfrontend-development.jpg\",\"width\":697,\"height\":407},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/staging.heliossolutions.co\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Drupal and Vue.js: Playing Together to Craft Rich Web Experiences\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#website\",\"url\":\"https:\/\/staging.heliossolutions.co\/blog\/\",\"name\":\"Helios Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/staging.heliossolutions.co\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#organization\",\"name\":\"Helios\",\"url\":\"https:\/\/staging.heliossolutions.co\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2023\/01\/Helios-blue-website.png\",\"contentUrl\":\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2023\/01\/Helios-blue-website.png\",\"width\":250,\"height\":47,\"caption\":\"Helios\"},\"image\":{\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/person\/ce1ab8197db1f84358e99b203e8f6b38\",\"name\":\"helios\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/acb724e9e4c2d0799bde8878da07c0aa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/acb724e9e4c2d0799bde8878da07c0aa?s=96&d=mm&r=g\",\"caption\":\"helios\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Drupal and Vue.js: Playing Together to Craft Rich Web Experiences","description":"Want to create more interactive web experiences? Here\u2019s how Drupal Development Experts are building with Drupal and Vue.js.","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:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/","og_locale":"en_US","og_type":"article","og_title":"Drupal and Vue.js: Playing Together to Craft Rich Web Experiences","og_description":"Want to create more interactive web experiences? Here\u2019s how Drupal Development Experts are building with Drupal and Vue.js.","og_url":"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/","og_site_name":"Helios Blog","article_published_time":"2017-07-05T13:43:22+00:00","article_modified_time":"2018-10-23T09:15:41+00:00","og_image":[{"width":697,"height":407,"url":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/drupal-vuejsfrontend-development.jpg","type":"image\/jpeg"}],"author":"helios","twitter_card":"summary_large_image","twitter_misc":{"Written by":"helios","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#article","isPartOf":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/"},"author":{"name":"helios","@id":"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/person\/ce1ab8197db1f84358e99b203e8f6b38"},"headline":"Drupal and Vue.js: Playing Together to Craft Rich Web Experiences","datePublished":"2017-07-05T13:43:22+00:00","dateModified":"2018-10-23T09:15:41+00:00","mainEntityOfPage":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/"},"wordCount":1065,"commentCount":3,"publisher":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/#organization"},"image":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#primaryimage"},"thumbnailUrl":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/drupal-vuejsfrontend-development.jpg","keywords":["Drupal 8 with Vuejs Development","Drupal Development Agency","Drupal Frontend Development with Vue.js","Drupal Web Services with Vue.js","Outsourcing Drupal Development"],"articleSection":["Drupal","UX\/UI"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/","url":"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/","name":"Drupal and Vue.js: Playing Together to Craft Rich Web Experiences","isPartOf":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#primaryimage"},"image":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#primaryimage"},"thumbnailUrl":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/drupal-vuejsfrontend-development.jpg","datePublished":"2017-07-05T13:43:22+00:00","dateModified":"2018-10-23T09:15:41+00:00","description":"Want to create more interactive web experiences? Here\u2019s how Drupal Development Experts are building with Drupal and Vue.js.","breadcrumb":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#primaryimage","url":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/drupal-vuejsfrontend-development.jpg","contentUrl":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/drupal-vuejsfrontend-development.jpg","width":697,"height":407},{"@type":"BreadcrumbList","@id":"https:\/\/staging.heliossolutions.co\/blog\/drupal-vue-js-playing-together-craft-rich-web-experiences\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/staging.heliossolutions.co\/blog\/"},{"@type":"ListItem","position":2,"name":"Drupal and Vue.js: Playing Together to Craft Rich Web Experiences"}]},{"@type":"WebSite","@id":"https:\/\/staging.heliossolutions.co\/blog\/#website","url":"https:\/\/staging.heliossolutions.co\/blog\/","name":"Helios Blog","description":"","publisher":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/staging.heliossolutions.co\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/staging.heliossolutions.co\/blog\/#organization","name":"Helios","url":"https:\/\/staging.heliossolutions.co\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2023\/01\/Helios-blue-website.png","contentUrl":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2023\/01\/Helios-blue-website.png","width":250,"height":47,"caption":"Helios"},"image":{"@id":"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/person\/ce1ab8197db1f84358e99b203e8f6b38","name":"helios","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/staging.heliossolutions.co\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/acb724e9e4c2d0799bde8878da07c0aa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/acb724e9e4c2d0799bde8878da07c0aa?s=96&d=mm&r=g","caption":"helios"}}]}},"feat_image_thumb":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/drupal-vuejsfrontend-development-550x250.jpg","mainsite_thumb":"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/07\/drupal-vuejsfrontend-development-150x170.jpg","alt_text":"","_links":{"self":[{"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/posts\/5050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/comments?post=5050"}],"version-history":[{"count":0,"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/posts\/5050\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/media\/5052"}],"wp:attachment":[{"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/media?parent=5050"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/categories?post=5050"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.heliossolutions.co\/blog\/wp-json\/wp\/v2\/tags?post=5050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}