Nuxt.js is a modern, performant framework that makes developing Vue.js-based frontend applications enjoyable. This session gives an introduction to Nuxt.js for Drupal developers. By providing analogies to known Drupal-APIs developers get ready to start building Nuxt.js applications that can run as a server or are deployed as static website. Finally, attendees will get an overview of the Nuxt ecosystem and the most essential Nuxt.js modules. No up-front Javascript or Vue.js knowledge required!

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

5. Getting started

6. npx create-nuxt-app <name>

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

10. Working with Nuxt

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
}

21. Connecting to Drupal

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