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

--

--

--

https://adrianjost.dev

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Upload data directly from Spreadsheet to Bigquery

The AOP-Routing library for Angular

Build a Unity WebGL game and serve it with an express server

compat-db: a browser API compatibility database

Recreating animated numerical counters in React from scratch (better than existing libraries)

Angular code coverage with Sonarqube

The best Ionic Templates to build Ionic Framework Apps

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
Adrian Jost

Adrian Jost

https://adrianjost.dev

More from Medium

Beautiful Tabs With Cirrus CSS. Power of Vue Router 4

Vue Recaptcha

Getting Started With Vue.js

Getting Started with Vue