Decoupling Drupal with Vue.js

Transcript

1. 1.

   Decoupling Drupal with Vue.js

2. 2.

   My a%empt at... Decoupling Drupal with Vue.js

3. 3.

   • PHP and Front End Developer • System Administrator •

   Senior Engineer at Inviqa • Part-!me freelancer • Open sourcer • @opdavies • oliverdavies.uk
4. 4.

   Drupal Content management system, wri!en in PHP

5. 5.

   Vue.js Progressive framework for building user interfaces

6. 6.

   What do I mean by decoupling?

7. 7.

   Drupal is a full stack CMS

8. 8.

   Request ➡ Drupal ➡ Twig ➡ Response

9. 9.

   Request ➡ Vue.js ➡ Response

10. 10.

    Vue.js ➡ Drupal ➡ Vue.js

11. 11.

    Why decouple?

12. 12.

    • More flexibility • Different development teams • Security •

    Exposing data to mul"ple sources • Aggrega"ng data from mul"ple sources • Back-end applica"on can be swapped out
13. 13.

    Example: conference talk submission website

14. 14.

    Configuring Drupal

15. 15.

    drush pm:enable jsonapi

16. 16.

    None
17. 17.

    Displaying sessions in Vue.js

18. 18.

    Configuring CORS in Drupal

19. 19.

    Access to XMLH!pRequest at 'h!p:/ / blueconf.docksal/jsonapi/node/session' from origin 'h!p:/

    /localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
20. 20.

    # services.local.yml cors.config: enabled: false # Specify allowed headers, like

    'x-allowed-header'. allowedHeaders: [] # Specify allowed request methods, specify ['*'] to allow all possible ones. allowedMethods: [] # Configure requests allowed from specific origins. allowedOrigins: ['*'] # Sets the Access-Control-Expose-Headers header. exposedHeaders: false # Sets the Access-Control-Max-Age header. maxAge: false # Sets the Access-Control-Allow-Credentials header. supportsCredentials: false
21. 21.

    # services.local.yml cors.config: enabled: true allowedHeaders: [ 'x-csrf-token', 'authorization', 'content-type',

    'accept', 'origin', 'x-requested-with', 'access-control-allow-origin', 'x-allowed-header', '*' ] allowedMethods: ['*'] allowedOrigins: ['http://localhost:8080'] exposedHeaders: true maxAge: false supportsCredentials: true
22. 22.

    Configuring Vue.js

23. 23.

    None
24. 24.

    .env APP_VUE_DRUPAL_URL=http://blueconf.docksal

25. 25.

    src/App.vue <script> import _ from 'lodash' import AcceptedSessionsList from '@/components/AcceptedSessionsList'

    import SessionForm from '@/components/SessionForm' const axios = require('axios') export default { // ... } </script>
26. 26.

    src/App.vue components: { AcceptedSessionsList, SessionForm }

27. 27.

    src/App.vue data () { return { loaded: false, sessions: []

    } }
28. 28.

    src/App.vue mounted () { const baseUrl = process.env.VUE_APP_DRUPAL_URL axios.get(`${baseUrl}/jsonapi/node/session`) .then(({

    data }) => { this.loaded = true this.sessions = data.data }) }
29. 29.

    src/App.vue computed: { sortedSessions: function () { return _(this.sessions) .sortBy(({

    attributes }) => attributes.title) } }
30. 30.

    src/App.vue <template> <div id="app" class="antialiased min-h-screen font-sans bg-gray-100 text-black p-12">

    <div class="w-full max-w-2xl mx-auto"> <accepted-sessions-list :sessions="sortedSessions" /> <session-form /> </div> </div> </template>
31. 31.

    src/components/AcceptedSessionsList.vue props: { sessions: { type: Object, required: true }

    }
32. 32.

    src/components/AcceptedSessionsList.vue computed: { acceptedSessions: function () { return this.sessions .filter(session

    => this.isAccepted(session)) .value() } }
33. 33.

    src/components/AcceptedSessionsList.vue methods: { isAccepted: function ({ attributes }) { return

    attributes.field_session_status === 'accepted' } }
34. 34.

    src/components/AcceptedSessionsList.vue <template> <div> <h1 class="text-4xl font-semibold mb-2">Sessions</h1> <div v-if="acceptedSessions.length >

    0" class="bg-white p-6 rounded-lg border"> <ul class="-mb-3"> <li v-for="{ attributes } in acceptedSessions" :key="attributes.drupal_internal__nid" class="mb-3" > {{ attributes.title }} </li> </ul> </div> </div> </template>
35. 35.

    Crea%ng sessions: POSTing back to Drupal

36. 36.

    None
37. 37.

    None
38. 38.

    None
39. 39.

    drush user:create api

40. 40.

    drush user:role:add api_user api

41. 41.

    SessionForm.vue <template> <section class="mt-8"> <form @submit.prevent="submit"> <label class="block mb-4"> Title

    <input name="title" type="text" v-model="form.title" required /> </label> <label class="block mb-4"> Abstract <textarea name="title" rows="5" v-model="form.body" required /> </label> <input class="cursor-pointer bg-blue-500 hover:bg-blue-700 focus:bg-blue-700 text-gray-100 px-4 py-2 rounded" type="submit" value="Submit session"> </form> </section> </template>
42. 42.

    SessionForm.vue data () { return { form: { body: '',

    field_session_status: 'accepted', field_session_type: 'full', title: '' } } },
43. 43.

    SessionForm.vue methods: { submit () { const adminUuid = '11dad4c2-baa8-4fb2-97c6-12e1ce925806'

    const apiUuid = '63936126-87cd-4166-9cb4-63b61a210632' // ... } }
44. 44.

    SessionForm.vue methods: { submit () { // ... const data

    = { type: 'node--session', attributes: this.form, relationships: { 'field_speakers': { 'data': { 'id': adminUuid, 'type': 'user--user' } }, 'uid': { 'data': { 'id': apiUuid, 'type': 'user--user' } } } } } }
45. 45.

    SessionForm.vue const baseUrl = process.env.VUE_APP_DRUPAL_URL axios({ method: 'post', url: `${baseUrl}/jsonapi/node/session`,

    data: { data }, headers: { 'Accept': 'application/vnd.api+json', 'Authorization': 'Basic YXBpOmFwaQ==', 'Content-Type': 'application/vnd.api+json' } })
46. 46.

    SessionForm.vue // ... .then(({ data }) => { const title

    = data.data.attributes.title this.messages.push(`Session ${title} has been created.`) this.$emit('submitted', data.data) this.form.body = '' this.form.title = '' })
47. 47.

    App.vue <session-form @submitted="addSession($event)" /> methods: { addSession: function (session) {

    this.sessions.push(session) } }
48. 48.

    SessionForm.vue // ... .catch(({ response: { data } }) =>

    { this.errors = _(data.errors).map('detail').value() })
49. 49.

    Demo

50. 50.

    Thanks! opdavi.es/drupal-vuejs @opdavies oliverdavies.uk