Slide 1

Slide 1 text

Decoupling Drupal with Vue.js

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

• PHP and Front End Developer • System Administrator • Senior Engineer at Inviqa • Part-!me freelancer • Open sourcer • @opdavies • oliverdavies.uk

Slide 4

Slide 4 text

Drupal Content management system, wri!en in PHP

Slide 5

Slide 5 text

Vue.js Progressive framework for building user interfaces

Slide 6

Slide 6 text

What do I mean by decoupling?

Slide 7

Slide 7 text

Drupal is a full stack CMS

Slide 8

Slide 8 text

Request ➡ Drupal ➡ Twig ➡ Response

Slide 9

Slide 9 text

Request ➡ Vue.js ➡ Response

Slide 10

Slide 10 text

Vue.js ➡ Drupal ➡ Vue.js

Slide 11

Slide 11 text

Why decouple?

Slide 12

Slide 12 text

• More ﬂexibility • Diﬀerent development teams • Security • Exposing data to mul"ple sources • Aggrega"ng data from mul"ple sources • Back-end applica"on can be swapped out

Slide 13

Slide 13 text

Example: conference talk submission website

Slide 14

Slide 14 text

Conﬁguring Drupal

Slide 15

Slide 15 text

drush pm:enable jsonapi

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Displaying sessions in Vue.js

Slide 18

Slide 18 text

Conﬁguring CORS in Drupal

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

# 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

Slide 21

Slide 21 text

# 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

Slide 22

Slide 22 text

Conﬁguring Vue.js

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

.env APP_VUE_DRUPAL_URL=http://blueconf.docksal

Slide 25

Slide 25 text

src/App.vue import _ from 'lodash' import AcceptedSessionsList from '@/components/AcceptedSessionsList' import SessionForm from '@/components/SessionForm' const axios = require('axios') export default { // ... }

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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 }) }

Slide 29

Slide 29 text

src/App.vue computed: { sortedSessions: function () { return _(this.sessions) .sortBy(({ attributes }) => attributes.title) } }

Slide 30

Slide 30 text

src/App.vue

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

src/components/AcceptedSessionsList.vue computed: { acceptedSessions: function () { return this.sessions .filter(session => this.isAccepted(session)) .value() } }

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

src/components/AcceptedSessionsList.vue

Sessions

{{ attributes.title }}

Slide 35

Slide 35 text

Crea%ng sessions: POSTing back to Drupal

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

drush user:create api

Slide 40

Slide 40 text

drush user:role:add api_user api

Slide 41

Slide 41 text

SessionForm.vue Title Abstract

Slide 42

Slide 42 text

SessionForm.vue data () { return { form: { body: '', field_session_status: 'accepted', field_session_type: 'full', title: '' } } },

Slide 43

Slide 43 text

SessionForm.vue methods: { submit () { const adminUuid = '11dad4c2-baa8-4fb2-97c6-12e1ce925806' const apiUuid = '63936126-87cd-4166-9cb4-63b61a210632' // ... } }

Slide 44

Slide 44 text

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' } } } } } }

Slide 45

Slide 45 text

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' } })

Slide 46

Slide 46 text

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 = '' })

Slide 47

Slide 47 text

App.vue methods: { addSession: function (session) { this.sessions.push(session) } }

Slide 48

Slide 48 text

SessionForm.vue // ... .catch(({ response: { data } }) => { this.errors = _(data.errors).map('detail').value() })