New Semantics

English

Deutsch

English

Deutsch

Theme

Themes & Projects ​

New Semantics frontend is organized as a Nuxt theme. Every theme lives under _theme/ and is selected via an env variable. This page explains the theme concept, the difference between themes and projects, and lists the themes that ship with the CMS.

What is a theme? ​

A theme is a complete Nuxt 4 project: its own nuxt.config.ts, its own package.json, its own app/ structure with components, layouts, pages, and plugins. Each theme is compiled as a standalone Nuxt build.

The core ships two themes:

ThemePurpose
vue-baseProduction default theme with the full feature set (admin, Pagebuilder, shop, e-learning)
projekt01Project fork for customer-specific tweaks

There are also three special folders that are not Nuxt themes:

FolderContents
_theme/base/Shared component building blocks (index/, menu/, pagebuilder/) — imported by themes
_theme/custom/Customer tweaks (plugin bootstrap, LESS/CSS/JS)
_theme/backend/Backend-specific asset bundle (not a rendering Nuxt theme)

Only vue-base/ and projekt01/ are real Nuxt themes with a package.json + nuxt.config.ts.

Theme vs. project ​

In practice the two terms are often mixed up. The distinction:

  • Theme = the technical code structure (a Nuxt project with components, layouts, plugins, styles)
  • Project = the customer-specific build that uses a theme + its own design tokens + its own logo + its own content structure

A project fork (projekt01/) typically copies vue-base/ as its starting point and then customizes custom.less, Nuxt plugins, and individual components. The Pagebuilder content itself does not live in the theme — it comes from the database and is rendered at runtime.

Theme selection via NUXT_PUBLIC_THEME ​

Which theme is active is controlled by the theme's own .env file:

env
# _theme/vue-base/.env
NUXT_PUBLIC_THEME=vue-base

Or, for a project fork:

env
# _theme/projekt01/.env
NUXT_PUBLIC_THEME=projekt01

The value is used internally to resolve project-specific assets and components — for example, the admin CSS loads the correct project overrides, and the compiled_css endpoint for menu editor styles reads the matching theme LESS.

For the dev and build process, every theme folder is a standalone Nuxt project with its own npm install and npm run dev. You don't activate a theme "in the system" — you start the specific theme directory you want.

Theme structure at a glance ​

_theme/
├── vue-base/                # Default theme (production)
│   ├── app/                 # Nuxt app directory (components, layouts, pages, plugins, stores)
│   ├── public/              # Static assets, admin CSS, fonts
│   ├── server/              # Nuxt server handlers
│   ├── nuxt.config.ts       # Nuxt configuration incl. PurgeCSS safelist
│   ├── package.json
│   └── .env                 # Theme-specific env variables
│
├── projekt01/               # Project fork
│   ├── app/
│   ├── public/
│   ├── nuxt.config.ts
│   ├── package.json
│   └── deploy.sh
│
├── base/                    # Shared building blocks (not a Nuxt theme!)
├── custom/                  # Customer tweaks
└── backend/                 # Backend asset bundle

Details: Theme Structure.

When to create a new theme/project? ​

SituationSolution
Change a single color or fontDesign tokens via /admin/design (LESS editor) — no new theme
Change the logo or individual components_theme/custom/ folder + Nuxt overrides
Completely different design systemA new project fork (_theme/projekt01-B/) copied from vue-base
Completely different content structuresA project fork with its own app/pages/ structure

For most cases, the design-token system (custom.less via the admin UI) is enough. Details: Design Tokens.

Build & deploy ​

Every theme has its own build commands:

bash
cd _theme/vue-base      # or projekt01
npm install
npm run dev             # development, localhost:3000
npm run build           # production
npm run generate        # static build (SSG)
npm run preview         # preview the production build

Details: Deployment.

See also ​