Dockerfile

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

assets/app.css

@@ -1,10 +1,6 @@
-@import "tailwindcss";
-
-@theme {
-  --color-primary: #b22222;
-  --color-darkgray: #2b292a;
-  --color-lightgray: #e3dfdf;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 * {
   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] ? 'active' : ''"
+        :class="sublink.URL == params?.[1] && !params[2] ? 'active' : ''"
         class="w-fit"
       >
         {{ sublink.name }}

nuxt.config.ts

@@ -1,5 +1,3 @@
-import tailwindcss from "@tailwindcss/vite";
-
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   app: {
@@ -20,14 +18,17 @@ 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,8 +1,6 @@
 {
-  "name": "ff-webpage-landing",
-  "version": "1.2.2",
+  "name": "nuxt-app",
   "private": true,
-  "description": "Feuerwehr/Verein Webseite",
   "type": "module",
   "scripts": {
     "build": "nuxt build",
@@ -14,12 +12,14 @@
   "dependencies": {
     "@nuxt/image": "^1.8.1",
     "@nuxtjs/strapi": "^2.0.0",
-    "@tailwindcss/vite": "^4.1.4",
-    "nuxt": "^3.16.2",
+    "nuxt": "^3.13.2",
     "vue": "latest",
     "vue-router": "latest"
   },
   "devDependencies": {
-    "tailwindcss": "^4.1.4"
-  }
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14"
+  },
+  "version": "1.2.2"
 }

pages/[...slug].vue

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

tailwind.config.js

@@ -0,0 +1,21 @@
+/** @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: [],
+};