This document discusses integrating modern JavaScript frameworks like Vue.js with Drupal 8. It notes that Drupal 8 allows decoupling the front end from the back end, exposing data through a REST API. This enables using frameworks like Vue.js for dynamic front-end interfaces while still using Drupal for content management. Popular companies that use Vue.js with their projects are listed, and the document demonstrates how to set up Vue.js in a Drupal 8 site using Twig templates.

1. Drupal 8 & VueJS
How to live without jQuery
Integration of modern javascript
frameworks

2. Dmytro Buzinov
Senior Software Engineer
https://www.linkedin.com/in/dmitriy-buzinov-3198062b

3. How to keep up with trend
Drupal + Vue | React | Angular

4. Drupal 8
Roundup

6. 2018!!!

7. Google trends
Vue | React | Angular

8. GitHub Stars
Vue | React

9. NPM Trends
Angular | Vue | React

10. Evan You
Creator of @vuejs, previously @meteor & @google
Who uses vue
Facebook
Facebook used Vue.js for a part of its Newsfeed
Netflix
Vue.js comes in handy to developers who need a tool for building movie
streaming interfaces. Netflix jumped on the opportunity early on and -
according to one of its developers, Kunal Kundaje - applied Vue.js in two of
its smaller, internal apps.
Adobe
Adobe wanted to maintain the exceptional user experience and performance, so they decided to have its
fronted teams switch to Vue.js and migrate the existing codebase smoothly. Vue.js proved easy to integrate
with the existing codebase and serves Adobe well.
Xiaomi | Alibaba | WizzAir | EuroNews | Laracasts | GitLab | ...

11. All in our hands
Decoupled Drupal
PHP
Drupal
Decoupled Front End
REST API
Data
JSON
Templates
HTML
JS

12. Module List
Drupal
Req e
RESTful Web Services
RESTful Web Services exposes entities and
other resources as a RESTful web API.

13. Module List
Drupal
Req e
Serialization
Serialization module provides a service for
(de)serializing data to/from formats such as
JSON and XML

14. Module List
Drupal
Rec n e
RESTUI
Provides a user interface for managing
REST resources

15. Module List
Drupal
Op i l
HAL
Serializes entities using Hypertext
Application Language (HAL)

17. Demo
Drupal | VueCLI GUI

18. All in our hands
Coupled Drupal
PHP
Drupal
Front End ( twig )
Data
Templates
HTML
JS

19. What we need to remember
Coupled Drupal
libraries.yml
vue:
version: 2.x
js:
/libraries/vue/dist/vue.js: {}
new Vue({
el: '#app',
delimiters: ['${', '}']
})
Hello <b>${ username }</b>
Hello
<b v-text=”username”></b>