Presentation at Drupalcon North America 2021 (April)

1. Getting started with the Lupus
Nuxt.js Drupal stack
Wolfgang Ziegler // fago

2. About me
Wolfgang Ziegler // fago
CEO / CTO of drunomics GmbH
Contributions
○ Drupal 8 Entity API & Typed Data API
○ Contrib: Rules, Entity API, Field
Collection, Profile2
Twitter: @the_real_fago
drupal.org/u/fago

3. Lupus Nuxt.js Drupal Stack

4. Agenda
● Short introduction
● Getting started
● Example project

5. … so why Custom Elements?
Don’t throw all Drupal features away!
➔ Routing, Path resolution & URL aliases
➔ Editorial control of pages & layouts
➔ Cookie-based authentication
➔ Caching, Previews, ...
Easy to render client-side!
➔ Web components, Vue.js, React, ...

6. Custom Elements everywhere
=
Components everywhere

7. Custom Element example

8. ● like Vue.js: Easy to get started, performant & enjoyable!
● includes all needed for fully-fledged applications
○ Transpilation, CSS (Pre-)Processors
○ Routing, with automatic code splitting, …
● Mode: Single Page Application or Universal
● Deployment target: Server Side Rendered or Static

9. Architecture overview
GET /home GET drupal.site/home
Custom Elements
HTML
Server-Side-
Rendering
Subsequent
pages
GET drupal.site/article/example
Custom Elements

10. Getting started

11. Drupal setup
composer require drupal/lupus_ce_renderer
drush en lupus_ce_renderer -y
drush config:set custom_elements.settings markup_style vue-3
Test it!
https://your-drupal.site/node/1?_format=custom_elements

12. Nuxt.js setup
npm init nuxt-app <project-name>
npm install nuxtjs-drupal-ce
# Enable the module!
# Scaffold initial components
rm -f layouts/default.vue && $(npm bin)/nuxt-drupal-ce-init

13. Nuxt.js module setup
nuxt.config.js:
{
buildModules: [
'nuxtjs-drupal-ce'
],
'nuxtjs-drupal-ce': {
baseURL: 'https://your-drupal.site'
}
}

14. Run Nuxt.js
// Development mode
npm run dev
// Production mode
npm run build
npm run start

15. Menu integration
● composer require drupal/rest_menu_items
● Enable menu REST route, e.g. via Rest UI module
● Grant permissions to the REST menu items resource
● Enable menu fetching in Nuxt.js:
un-comment the nuxtServerInit action in store/init.js

16. Example!

17. Authentication

18. Strategy
● Allow Cross-Origin-Requests (CORS) from the browser to Drupal
● Drupal backend needs to allow CORS from www.example.com
● Login at drupal.example.com
→ Cookie is set for drupal.example.com
● Optional: For SSR with authentication configure a shared cookie
domain e.g. .example.com for
drupal.example.com and www.example.com (Nuxt.js)

19. Drupal setup
sites/default/services.yml:
parameters:
cors.config:
enabled: enabled
allowedMethods: ['GET', 'POST']
allowedOrigins: ['*']
supportsCredentials: true

20. Nuxt.js setup
nuxt.config.js:
{
'nuxtjs-drupal-ce': {
baseURL: 'https://your-drupal.site',
useProxy: false,
axios: {
withCredentials: true
}
}
}

21. Nuxt.js setup
nuxt.config.js:
{
'nuxtjs-drupal-ce': {
baseURL: 'https://your-drupal.site',
useProxy: false,
axios: {
withCredentials: true
}
}
}

22. Example!

23. Resources
● Documentation site:
stack.lupus.digital
● Example project (using ddev)
github.com/drunomics/lupus-nuxtjs-drupal-stack-example
● Help?
#custom-elements at Drupal slack!

24. Thank you!