Nuxt.JS Theming #1

Photo by La-Rel Easter on Unsplash

Give me some context — Why?

I work on the project Schul-Cloud at the Hasso Plattner Institute in Potsdam Germany. There we are developing an educational cloud for the German school system. In Germany, each federal state is responsible for its education, so many states want their very own education cloud. This means for us to exchange logos, adjust colors and partly also adapt the content of whole pages. Sometimes we even develop features which should only be available on some platforms.

The Concept

example project directory structure with theme directories

The Problem

This concept has been working very reliably for us for some time now. However, we are currently converting our frontend architecture from a gulp based build process to Nuxt.JS (which is using webpack in the background), which is why we would like to adopt this concept in Nuxt.JS. It turns out, it’s not that easy because NUXT.JS is giving you a lot of great defaults you have to workaround.

Prerequisites — Repo Setup

At first, I would like to explain how I have initialized the repository.
To get started I executed the nuxt.js bootstrap command npx create-nuxt-app <project-name> and then moved all the created directories into an src directory to keep the repo organized. This also requires setting the srcDir key to “src/” in the nuxt.config.js file.

Let’s theme components!

To be precise: Let’s start with theming components from the /src/components directory with overwrites from /src/themes/{THEME}/components (again, if they exist).

Create Aliases for Components

At first we will create a file called alias.config.js at the root directory. In this file we will define all our aliases. We then need to add the exported aliases to our webpack build config in the nuxt.config.js file.

Overwrite components

The trick we will do now is, to generate aliases for all components in the theme directory and push them into our alias config. Webpack will then resolve the more specific alias first and therefore use the themed component instead.

Overwrite Assets

Of course, your project does not only contain components. There propably are a couple of images, icons, fonts and so on. To theme those, we can use a similar approach than for components.

required changes in aliases.config.js
<template>
<img class="icon" src="@assets/icon.png">
</template>

Let’s theme whole pages!

import fs from "fs";export default {
// all the existing stuff from nuxt.config.js
// ...
/*
** themed pages
*/
router: {
extendRoutes(routes, resolve) {
const theme = process.env.THEME || "default";
if(theme === "default"){
return
}
routes.map(route => {
const path = resolve(`src/themes/${theme}/${route.chunkName}.vue`)
if (fs.existsSync(path)) {
route.component = path
}
return route
})
}
}
}

But what about …?

Layouts, Middlewares, Plugins, the static directory and most importantly the store? How can I theme those?
Unfortunately, I didn’t had time yet to research and document theming methods for these directories. But I will do, so stay tuned for part 2 of this article.
If you want to follow my progress, take a look at this GitHub Repo: https://github.com/adrianjost/nuxtjs-theming

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store