Seitenspezifische Body Class mit Nuxt.js
Kategorien
Etwas, was ich an WordPress immer praktisch fand, ist dass es von Haus aus relativ ausgiebig seitespezifische CSS-Klassen im <body> Tag hinzufügt. Dies vereinfacht dann schnell und einfach CSS Styling für eine spezifische Seite vorzunehmen.
Auf einer WordPress Seite sieht dies etwas so aus:
<body class="post-template-default single single-post postid-585 single-format-standard logged-in large">
Auf einer Nuxt.js Seite hatte ich die gleiche Herausforderung, dass ich basierend auf der jeweiligen Seite gewisse CSS Anpassungen machen wollte. Die einfachste Variante aus meiner Seite ist es dafür eben die jeweilige Seite über eine spezifische body class ansprechen zu können.
Mit dem folgenden Code fügt man eine auf der $route basierende body class hinzu:
So sieht danach der Body Tag aus:
<body class="page-beispielseite">