Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine AS build
+FROM node:22-alpine AS build
 
 WORKDIR /app
 
@@ -10,7 +10,7 @@ COPY . /app
 
 RUN npm run build
 
-FROM node:18-alpine AS prod
+FROM node:22-alpine AS prod
 
 WORKDIR /app
 

assets/app.css

@@ -1,6 +1,10 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #b22222;
+  --color-darkgray: #2b292a;
+  --color-lightgray: #e3dfdf;
+}
 
 * {
   font-family: "ConthraxSemiBold";

components/Header.vue

@@ -54,7 +54,7 @@
         v-for="sublink in navbar_sub_items"
         :key="sublink.id"
         :to="`/${params?.[0]}/${sublink.URL}`"
-        :class="sublink.URL == params?.[1] && !params[2] ? 'active' : ''"
+        :class="sublink.URL == params?.[1] ? 'active' : ''"
         class="w-fit"
       >
         {{ sublink.name }}

nuxt.config.ts

@@ -1,3 +1,5 @@
+import tailwindcss from "@tailwindcss/vite";
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   app: {
@@ -18,17 +20,14 @@ export default defineNuxtConfig({
 
   css: ["~/assets/app.css", "~/assets/ConthraxSemiBold.css"],
 
-  postcss: {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    },
-  },
-
   compatibilityDate: "2024-04-03",
   devtools: { enabled: false },
   modules: ["@nuxtjs/strapi", "@nuxt/image"],
 
+  vite: {
+    plugins: [tailwindcss()],
+  },
+
   strapi: {
     url: process.env.PUBLIC_STRAPI_URL,
     prefix: "/api",

package.json

@@ -1,6 +1,8 @@
 {
-  "name": "nuxt-app",
+  "name": "ff-webpage-landing",
+  "version": "1.2.2",
   "private": true,
+  "description": "Feuerwehr/Verein Webseite",
   "type": "module",
   "scripts": {
     "build": "nuxt build",
@@ -12,14 +14,12 @@
   "dependencies": {
     "@nuxt/image": "^1.8.1",
     "@nuxtjs/strapi": "^2.0.0",
-    "nuxt": "^3.13.2",
+    "@tailwindcss/vite": "^4.1.4",
+    "nuxt": "^3.16.2",
     "vue": "latest",
     "vue-router": "latest"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.14"
-  },
-  "version": "1.2.2"
+    "tailwindcss": "^4.1.4"
+  }
 }

pages/[...slug].vue

@@ -1,4 +1,5 @@
 <template>
+  {{ collectionDetail }}
   <NuxtLayout name="default">
     <NotFound v-if="notFound" />
     <ContentBuilder v-else-if="showContentBuilder" :hero="page?.hero" :content="page?.content" />
@@ -48,7 +49,7 @@ const { data: pages } = await useAsyncData("pages", () =>
       },
     },
     filters: {
-      ...(active_page_id.value == "" ? { slug: params[0], ref_only_access: true } : {}),
+      ...(active_page_id.value == "" ? { slug: params.join("_"), ref_only_access: false } : {}),
     },
   })
 );
@@ -57,11 +58,11 @@ const page = computed(() => {
 });
 
 let detail = ref<Article | Operation | Event | Vehicle | undefined>(undefined);
-const searchDetail = computed(() => {
+const collectionDetail = computed(() => {
   if (!active_sub_item.value) return params[1];
   return params[2];
 });
-if (searchDetail.value) {
+if (collectionDetail.value) {
   let collectionOfDetail = [
     ...new Set(
       page.value?.content
@@ -88,12 +89,12 @@ if (searchDetail.value) {
 }
 
 const notFound = computed(() => {
-  if (searchDetail.value) return !detail.value;
+  if (collectionDetail.value && detail.value) return !detail.value;
   else return active_page_id.value == "" && !page.value?.content && !page.value?.hero;
 });
 
 const showContentBuilder = computed(() => {
-  if (searchDetail.value) return !detail.value;
+  if (collectionDetail.value && detail.value) return !detail.value;
   else return !!page.value?.content || !!page.value?.hero;
 });
 </script>

tailwind.config.js

@@ -1,21 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./components/**/*.{js,vue,ts}",
-    "./layouts/**/*.vue",
-    "./pages/**/*.vue",
-    "./plugins/**/*.{js,ts}",
-    "./app.vue",
-    "./error.vue",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        primary: "#B22222",
-        darkgray: "#2B292A",
-        lightgray: "#E3DFDF",
-      },
-    },
-  },
-  plugins: [],
-};