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

Building a landing page with Cruip — Getting started with NPM Scripts

Exploring JavaScript Promises in depth

ToteBee : Create data-driven web contents simply in 5 minutes without programming.

10 Tricky things about JavaScript

How to send Client-side Email in React JS

Bootstrap 5 Neumorphic Buttons

OLUWATOSIN OLATUJOYE, ZYLUS GROUP INTERNATIONAL CHAIRMAN WINS 2022 ROYAL AFRICAN YOUNG LEADERSHIP…

Node.js Weekly Update — 14 July, 2017

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

Persistent Vuex Store For Only Specific Modules

How to block access to your website and related services in Russia

CORS Preflight Did Not Succeed on nuxt js/ vuejs

Vue js 3 with Webpack 5 — Project setup steps

Banner