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
<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 …?

--

--

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