A gentle decoupling: Progressively enhance your site with Vue.js

How you can decouple your site one block, page, and region at a time to improve UX and increase developer freedom. Modernize your front-end as part of your normal development, without having to start over from scratch.

• Is your team wary of the time required to rewrite your front end entirely?
• Are you or your fellow developers hesitant to dive into React or JSX?
• Do you want to stop relying on jQuery in favor of more modern solutions?

If any of the above apply to you, the Golf Channel Digital team wants to try and help. We've been using Vue.js for almost two years to add new functionality to our sites, while maintaining our existing front-end. It's surprisingly simple to get started. We'll show you how to create a custom decoupled block, and how to leverage those techniques to replace individual regions and even pages of your website.

We’ll talk briefly about the business needs that drove the decision to start incrementally decoupling our site. We’ll provide examples of how you can implement major features “the Drupal way” and still leverage Vue JS for front-end enhancement. We’ll also touch on managing a global Vue instance to reduce code duplication.

Finally, we’ll provide a practical example by walking through the steps required to take a Drupal menu that’s currently in Twig, and replace it with one generated with Vue.