![Adding a module
● Install package, e.g.
npm install nuxtjs-drupal-ce
● Configure the module in nuxt.config.js under
modules or buildModules
{
buildModules: [
'nuxtjs-drupal-ce'
],
'nuxtjs-drupal-ce': {
baseURL: 'https://your-drupal.site'
}
}](https://image.slidesharecdn.com/drupalcon2021eur-nuxt-211007100046/85/Drupalcon-2021-Nuxt-js-for-drupal-developers-29-320.jpg)
Drupalcon 2021 - Nuxt.js for drupal developers
- 1. Nuxt.js for Drupal developers by Wolfgang Ziegler // fago
- 2. About me Wolfgang Ziegler // fago CEO / CTO of drunomics GmbH Contributions ○ Drupal 8 Entity API & Typed Data API ○ D7 Contrib: Rules, Entity API, Field Collection, Profile2 Twitter: @the_real_fago drupal.org/u/fago
- 3. like Vue.js: Easy to get started, performant, enjoyable! The Intuitive Vue Framework
- 4. What does it provide? ● fully-fledged vue.js app setup ■ Transpilation, CSS (Pre-)Processors ■ Routing (vue-router), automatic code splitting ■ Vuex store setup ■ Server-rendering (SSR), SEO Friendly (vue-meta) ● Deployment target: Server Side Rendered or Static ● Modules Ecosystem
- 7. Project creation options ● Javascript / Typescript, Yarn / Npm ● UI framework (Tailwind CSS, Bootstrap, Buefy/Bulma,...) ● Linting tools (Eslint, Prettier, Stylelint, Commitlint) ● Testing frameworks (Jest, AVA, Webdriver IO, Nightwatch) ● Rendering mode - Universal (SSR/SSG) / SPA ● Deployment target (Server / Static)
- 8. npm run dev
- 11. Project structure ├── components ├── node_modules ├── pages ├── static ├── store ├── nuxt.config.js ├── package.json ├── package-lock.json └── README.md
- 12. Pages ● special Vue components, integrate with Vue routing ● Component is acting as “Controller” ● Auto-generates route based upon file-name ● Dynamic parameters via _param convention
- 14. Nuxt lifecycle methods Components ● fetch() More: https://nuxtjs.org/docs/concepts/nuxt-lifecycle/ Pages (selection) ● asyncData ● head ● layout ● transition (property)
- 15. Nuxt Context ● Provides access to all the APIs/objects of the application const context = {app, store, route, params, query, env, isDev, isHMR, redirect, error, $config } ● Passed as argument OR accessible via this.$nuxt.context
- 16. Process flags & Context if (process.server) { const { req, res, beforeNuxtRender } = context } if (process.client) { const { from, nuxtState } = context } if (process.static) { // Static deployment target is in use. }
- 17. Context & helpers overview ● Great cheat-sheet at https://nuxtjs.org/docs/concepts/context-helpers/
- 19. Nuxt Components Discovery ● Auto-import used components ● Lazy loading (Async components) ● Production code-splitting Enable via nuxt.config.js: export default { components: true }
- 22. Do It Yourself ● Implement asyncData / fetch hooks ● Use Drupal APIs like REST, JSON API, GraphQL with Nuxt modules like @nuxtjs/axios, @nuxt/http @nuxtjs/apollo (GraphQL) ● Use general SDKs like npmjs.com/package/drupal-js-sdk npmjs.com/package/drupal-jsonapi-params npmjs.com/package/@gdwc/drupal-state
- 23. https://druxtjs.org DruxtJS 101: Fully Decoupled Drupal with JSON:API and Nuxt.js
- 24. Lupus Nuxt.js Drupal Stack
- 25. Lupus Nuxt.js Drupal Architecture GET /home GET drupal.site/home Custom Elements HTML Server-Side- Rendering
- 26. Lupus Nuxt.js Drupal Stack Resources ● https://stack.lupus.digital ● Modules ○ Drupal module - Lupus Custom Elements Renderer ○ Nuxt module - Nuxt.js Drupal Custom Elements Connector ● Getting Started With the Lupus Nuxt.js Drupal Stack / DrupalCon North America 2021
- 27. Extending Nuxt
- 28. Nuxt Modules are Nuxt extensions They ● extend Nuxt core functionality ● add endless integrations
- 29. Adding a module ● Install package, e.g. npm install nuxtjs-drupal-ce ● Configure the module in nuxt.config.js under modules or buildModules { buildModules: [ 'nuxtjs-drupal-ce' ], 'nuxtjs-drupal-ce': { baseURL: 'https://your-drupal.site' } }
- 30. Modules & The Ecosystem ● https://nuxtjs.org/modules/ ● Typescript, Proxy, i18n, PWA, Sitemaps, ... ● UI frameworks (Tailwind CSS, Bootstrap, Buefy/Bulma,...) ● Linting tools (Eslint, Prettier, Stylelint, Commitlint) ● Testing frameworks (Jest, AVA, Webdriver IO, Nightwatch) ● Analytics (GTag, Adsense, Plausible, Matomo, … ) …. Go-to solutions for common problems!
- 31. Modules can provide one or many plugins extend and alter Nuxt via hooks Plugins run code on run-time, each request (before instantiating the root Vue.js Application) Middleware before rendering page/pages - universal serverMiddleware runs only on the server - before processing requests
- 32. Plugins ● Live in the plugins directory and re configured in nuxt.config.js ● Can be limited to client or server side by file-name or config ● Typical use-cases are: ○ Inject $helpers into $context - e.g. $drupalCe ○ Add Vue plugins to the application e.g. Vue.use(VToolTip) ○ Customize external packages. e.g. add Axios interceptors
- 33. Outlook
- 34. Nuxt2 -> Vue2 ● Nuxt 2 (stable) uses Vue 2 ● Vue3 is stable ○ but not yet default ○ provides vue2 compatibility and upgrade tools ● Nuxt3 is coming and switches to Vue3 ○ will take time to become stable ● Nuxt2 is good for starting new projects!
- 35. Nuxt3 features ● Composition API ● Webpack5 and/or Vite support ● Nuxt Nitro ● Nuxt Bridge
- 37. Resources ● https://nuxtjs.org/ ○ Getting started ○ https://nuxtjs.org/modules ○ Nuxt 3 ● Discord Nuxt.js ● https://druxtjs.org ● https://stack.lupus.digital
- 38. What did you think? Have a look at the session description below and take the survey for each session: https://events.drupal.org/europe2021/schedule/all