![Nuxt.js module setup
nuxt.config.js:
{
buildModules: [
'nuxtjs-drupal-ce'
],
'nuxtjs-drupal-ce': {
baseURL: 'https://your-drupal.site'
}
}](https://image.slidesharecdn.com/drupalcon2021na-gettingstartedwiththelupusnuxt-210426115345/85/Getting-started-with-the-Lupus-Nuxt-js-Drupal-Stack-13-320.jpg)
![Drupal setup
sites/default/services.yml:
parameters:
cors.config:
enabled: enabled
allowedMethods: ['GET', 'POST']
allowedOrigins: ['*']
supportsCredentials: true](https://image.slidesharecdn.com/drupalcon2021na-gettingstartedwiththelupusnuxt-210426115345/85/Getting-started-with-the-Lupus-Nuxt-js-Drupal-Stack-19-320.jpg)
Getting started with the Lupus Nuxt.js Drupal Stack
- 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
- 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!