Nuxt.JS Theming #1

Photo by La-Rel Easter on Unsplash

Give me some context — Why?

The Concept

example project directory structure with theme directories

The Problem

Prerequisites — Repo Setup

Let’s theme components!

Create Aliases for Components

Overwrite components

Overwrite Assets

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

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"){
} => {
const path = resolve(`src/themes/${theme}/${route.chunkName}.vue`)
if (fs.existsSync(path)) {
route.component = path
return route

But what about …?



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