1 of 37

Prerendering Vue.js Applications

Using Drupal, GraphQL and Nuxt.js

2 of 37

Welcome

3 of 37

Milan Matull

Managing Partner�Frontend Developer �Factorial GmbH�

@mlnmln

github.com/mlnmln

4 of 37

Factorial

Digital Agency from Hamburg.

Est. 2015

5 of 37

People

~ 30 employees from 10 countries

onsite in Hamburg

&

remotely in Europe, USA and South Africa

Working in small, cross-functional teams

6 of 37

Clients

Bauer Media

dpa

DZ-4

gruner + jahr

Klambt

Mutabor

Pixelpark

RMH

Silpion

SinnerSchrader Swipe

Stellenwerk

...

7 of 37

Services

Enterprise Content Management

User Interface Development

Digital Product Development

...

8 of 37

Tech

PostCSS

Vanilla.js

Vue.js

...

Drupal

Laravel

symfony

Express

Koa

...

9 of 37

Brainstorming topics

* Building component libraries with Vue CLI 3 and Lerna.js (x)

* Building web components with Vue CLI

* e2e testing with TestCafe

* Functional components in Vue.js

* Introduction to Vue CLI/UI

* Testing Vue.js Applications with Jest

* TypeScript and Vue.js, TypeScript in Vuex

* Understanding Webpack-chain

* Using Vue Storybook

* Using VuePress

10 of 37

The revelation Pt.1

11 of 37

The revelation Pt.2

12 of 37

Drupal + GraphQL + Nuxt

for prerendering Vue.js Applications

13 of 37

Drupal

14 of 37

Drupal

https://drupal.org

15 of 37

Installation

16 of 37

Generating content

17 of 37

Generated content

18 of 37

GraphQL

19 of 37

GraphQL

https://graphql.org/

20 of 37

GraphQL in Drupal

21 of 37

GraphQL Voyager

22 of 37

GraphiQL

23 of 37

Nuxt.js

24 of 37

Nuxt.js

https://nuxtjs.org

25 of 37

Installing Nuxt.js

26 of 37

Installing GraphQL in Nuxt.js

27 of 37

Configuration

28 of 37

Usage

�list of articles

29 of 37

Usage

�detail view of 1 article

30 of 37

Result

31 of 37

Generating a static build

32 of 37

Generating a static build

Only the entry point is generated.

33 of 37

Generating dynamic routes

https://nuxtjs.org/api/configuration-generate/#function-with-a-callback

34 of 37

Generating dynamic routes

35 of 37

Result

36 of 37

Going forward

  • Setup a build pipeline
  • Trigger webhooks when publishing new content from Drupal
  • Deploy the build to a CDN

37 of 37

Thank you.