version update to nuxt4

app/components/CollectionDetail.vue

@@ -54,10 +54,10 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type Article from "../types/collection/article";
+import type Article from "~~/types/collection/article";
-import type Operation from "../types/collection/operation";
+import type Operation from "~~/types/collection/operation";
-import type Event from "../types/collection/event";
+import type Event from "~~/types/collection/event";
-import type Vehicle from "../types/collection/vehicle";
+import type Vehicle from "~~/types/collection/vehicle";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;

app/components/ContentBuilder.vue

@@ -23,8 +23,8 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type ItemsHero from "../types/component/items/hero";
+import type ItemsHero from "~~/types/component/items/hero";
-import type { ComponentTypes } from "../types/component/baseComponent";
+import type { ComponentTypes } from "~~/types/component/baseComponent";
 
 defineProps({
   hero: { type: Object as PropType<ItemsHero>, required: false, default: null },

app/components/base/ListImageItem.vue

@@ -36,8 +36,8 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type BaseCollection from "~/types/collection/baseCollection";
+import type BaseCollection from "~~/types/collection/baseCollection";
-import type Lookup from "../../types/collection/lookup";
+import type Lookup from "~~/types/collection/lookup";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;

app/components/base/ListItem.vue

@@ -22,8 +22,8 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type BaseCollection from "../../types/collection/baseCollection";
+import type BaseCollection from "~~/types/collection/baseCollection";
-import type Lookup from "../../types/collection/lookup";
+import type Lookup from "~~/types/collection/lookup";
 
 const props = defineProps({
   data: Object as PropType<BaseCollection>,

app/components/dynamicZone/ColumnImageText.vue

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneColumnImageText from "../../types/component/dynamic-zone/columnImageText";
+import type DynamicZoneColumnImageText from "~~/types/component/dynamic-zone/columnImageText";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;

app/components/dynamicZone/DualColumnText.vue

@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneDualColumnText from "../../types/component/dynamic-zone/dualColumnText";
+import type DynamicZoneDualColumnText from "~~/types/component/dynamic-zone/dualColumnText";
 
 defineProps({
   data: Object as PropType<DynamicZoneDualColumnText>,

app/components/dynamicZone/Embedding.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneEmbedding from "../../types/component/dynamic-zone/embedding";
+import type DynamicZoneEmbedding from "~~/types/component/dynamic-zone/embedding";
 
 const props = defineProps({
   data: Object as PropType<DynamicZoneEmbedding>,

app/components/dynamicZone/FileDownload.vue

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneFileDownload from "../../types/component/dynamic-zone/fileDownload";
+import type DynamicZoneFileDownload from "~~/types/component/dynamic-zone/fileDownload";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;

app/components/dynamicZone/FileViewer.vue

@@ -21,7 +21,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneFileViewer from "../../types/component/dynamic-zone/fileViewer";
+import type DynamicZoneFileViewer from "~~/types/component/dynamic-zone/fileViewer";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;

app/components/dynamicZone/FullImage.vue

@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneFullImage from "../../types/component/dynamic-zone/fullImage";
+import type DynamicZoneFullImage from "~~/types/component/dynamic-zone/fullImage";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;

app/components/dynamicZone/FullText.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneFullText from "../../types/component/dynamic-zone/fullText";
+import type DynamicZoneFullText from "~~/types/component/dynamic-zone/fullText";
 
 defineProps({
   data: Object as PropType<DynamicZoneFullText>,

app/components/dynamicZone/Gallery.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneGallery from "../../types/component/dynamic-zone/gallery";
+import type DynamicZoneGallery from "~~/types/component/dynamic-zone/gallery";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;

app/components/dynamicZone/Section.vue

@@ -5,7 +5,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneSection from "../../types/component/dynamic-zone/section";
+import type DynamicZoneSection from "~~/types/component/dynamic-zone/section";
 
 defineProps({
   data: Object as PropType<DynamicZoneSection>,

app/components/dynamicZone/Spacer.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneSpacer from "../../types/component/dynamic-zone/spacer";
+import type DynamicZoneSpacer from "~~/types/component/dynamic-zone/spacer";
 
 defineProps({
   data: Object as PropType<DynamicZoneSpacer>,

app/components/field/Content.vue

@@ -41,7 +41,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type ContentField from "../../types/field/content";
+import type ContentField from "~~/types/field/content";
 
 defineProps({
   data: Object as PropType<ContentField>,

app/components/field/Text.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import type { TextField } from "../../types/field/content";
+import type { TextField } from "~~/types/field/content";
 
 defineProps({
   data: Array<TextField>,

app/components/field/Type.vue

@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type { TypeField } from "../../types/field/content";
+import type { TypeField } from "~~/types/field/content";
 
 defineProps({
   data: Object as PropType<TypeField>,

app/components/items/Hero.vue

@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type ItemsHero from "../../types/component/items/hero";
+import type ItemsHero from "~~/types/component/items/hero";
 
 defineProps({
   data: Object as PropType<ItemsHero>,

app/components/shared/EmphasiseArticle.vue

@@ -21,14 +21,14 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type SharedEmphasiseArticle from "../../types/component/shared/emphasiseArticle";
+import type SharedEmphasiseArticle from "~~/types/component/shared/emphasiseArticle";
-import type Lookup from "../../types/collection/lookup";
+import type Lookup from "~~/types/collection/lookup";
 
 const { find } = useStrapi();
 const { data: lookup } = await useAsyncData(() =>
   find<Lookup>("collection-lookups", {
     filters: {
-      collection: "articles",
+      collection: { $eq: "articles" },
     },
   })
 );

app/components/shared/List.vue

@@ -90,8 +90,8 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type SharedList from "../../types/component/shared/list";
+import type SharedList from "~~/types/component/shared/list";
-import type BaseCollection from "~/types/collection/baseCollection";
+import type BaseCollection from "~~/types/collection/baseCollection";
 
 interface Meta {
   page: number;
@@ -113,19 +113,26 @@ const pagination = ref<Meta>({ page: 0, pageSize: 0, pageCount: 0, total: 0 });
 const activeYear = ref<number>(0);
 
 if (props.data?.lookup.list_with_date != "none") {
-  const { data: year } = await useAsyncData<Array<number>>(() =>
+  const { data: year } = await useAsyncData<Array<number>>(
-    $fetch(`${baseUrl}/api/custom/${props.data?.lookup.collection}/distinct-years`)
+    "range" + (props.data?.lookup.documentId ?? ""),
+    () => $fetch(`${baseUrl}/api/custom/${props.data?.lookup.collection}/distinct-years`),
+    {
+      watch: [() => props.data],
+    }
   );
   years.value = year.value ?? [];
   activeYear.value = years.value[0] ?? 0;
 }
-const { data: collections } = await useAsyncData(() =>
+const { data: collections } = await useAsyncData(
+  props.data?.lookup.documentId ?? "",
+  () =>
     find<BaseCollection>(props.data?.lookup.collection ?? "", {
       ...(props.data?.lookup?.list_with_date != "none"
         ? {
             sort: "date:desc",
             filters: {
               date: {
+                //@ts-ignore
                 $between: [`${activeYear.value}-01-01 00:00:00.000000`, `${activeYear.value}-12-31 23:59:59.999`],
               },
             },
@@ -142,7 +149,10 @@ const { data: collections } = await useAsyncData(() =>
               withCount: true,
             },
           }),
-  })
+    }),
+  {
+    watch: [() => props.data],
+  }
 );
 collection.value = collections.value?.data;
 pagination.value = (collections.value?.meta.pagination as unknown as {
@@ -226,6 +236,7 @@ async function changeTimedData(year: number) {
     sort: "date:desc",
     filters: {
       date: {
+        // @ts-ignore
         $between: [`${activeYear.value}-01-01 00:00:00.000000`, `${activeYear.value}-12-31 23:59:59.999`],
       },
     },
@@ -254,6 +265,7 @@ async function changeTimedPage(page: number = 1) {
     sort: "date:desc",
     filters: {
       date: {
+        // @ts-ignore
         $between: [`${activeYear.value}-01-01 00:00:00.000000`, `${activeYear.value}-12-31 23:59:59.999`],
       },
     },

app/composables/useGlobal.ts

@@ -1,8 +1,8 @@
-import type BaseFile from "../types/component/baseFile";
+import type BaseFile from "~~/types/component/baseFile";
-import type Footer from "../types/component/global/footer";
+import type Footer from "~~/types/component/global/footer";
-import type Navbar from "../types/component/global/navbar";
+import type Navbar from "~~/types/component/global/navbar";
-import type SEO from "../types/component/global/seo";
+import type SEO from "~~/types/component/global/seo";
-import type Global from "../types/single/global";
+import type Global from "~~/types/single/global";
 
 export const useGlobal = () => {
   const global = useState<Global | null>("global");

app/composables/useSitemap.ts

@@ -1,5 +1,5 @@
-import type Page from "../types/collection/page";
+import type Page from "~~/types/collection/page";
-import type { ComponentTypes } from "../types/component/baseComponent";
+import type { ComponentTypes } from "~~/types/component/baseComponent";
 
 export const useSitemap = () => {
   const { navbar, footer } = useGlobal();

app/layouts/landing.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import type Homepage from "../types/single/homepage";
+import type Homepage from "~~/types/single/homepage";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;

app/pages/[...slug].vue

@@ -7,11 +7,11 @@
 </template>
 
 <script setup lang="ts">
-import type Article from "../types/collection/article";
+import type Article from "~~/types/collection/article";
-import type Event from "../types/collection/event";
+import type Event from "~~/types/collection/event";
-import type Operation from "../types/collection/operation";
+import type Operation from "~~/types/collection/operation";
-import type Vehicle from "../types/collection/vehicle";
+import type Vehicle from "~~/types/collection/vehicle";
-import type Page from "../types/collection/page";
+import type Page from "~~/types/collection/page";
 
 const {
   params: { slug: params },
@@ -33,10 +33,14 @@ const similarestPage = computed(() => {
     (bestMatch, current) => {
       const currentMatchLength = current.path
         .split("/")
-        .filter((segment, index) => segment != "" && segment == activePath.value.split("/")[index]).length;
+        .filter(
+          (segment, index) => segment != "" && segment.trim() == activePath.value.split("/")[index]?.trim()
+        ).length;
       const bestMatchLength = bestMatch.path
         .split("/")
-        .filter((segment, index) => segment != "" && segment == activePath.value.split("/")[index]).length;
+        .filter(
+          (segment, index) => segment != "" && segment.trim() == activePath.value.split("/")[index]?.trim()
+        ).length;
 
       if (currentMatchLength > bestMatchLength) {
         return current;
@@ -49,10 +53,10 @@ const similarestPage = computed(() => {
 });
 
 const { data: pages } = await useAsyncData(
+  activePath,
   () =>
     findOne<Page | Array<Page>>("pages", similarestPage.value?.document, {
       populate: {
-        populate: "*",
         content: {
           populate: "*",
         },
@@ -60,14 +64,16 @@ const { data: pages } = await useAsyncData(
           populate: "*",
         },
       },
-      filters: {
+      filters: !similarestPage.value?.document
-        ...(!similarestPage.value?.document
+        ? {
-          ? { slug: Array.isArray(params) ? params.join("~") : params, ref_only_access: false }
+            slug: { $eq: Array.isArray(params) ? params.join("~") : params ?? "" },
-          : {}),
+            ref_only_access: { $eq: false },
-      },
+          }
+        : {},
     }),
   {
     default: () => null,
+    watch: [activePath],
   }
 );
 const page = computed(() => {
@@ -83,13 +89,13 @@ const notFound = computed(() => {
   else
     return (
       !page.value ||
-      (page.value && !(page.value.content.length != 0 || (page.value.hero.title && page.value.hero.banner)))
+      (page.value && !(page.value.content.length != 0 || page.value.hero.title || page.value.hero.banner))
     );
 });
 
 const showContentBuilder = computed(() => {
   if (isCollectionDetail.value && detail.value) return !detail.value;
-  else return page.value && (page.value.content.length != 0 || (page.value.hero.title && page.value.hero.banner));
+  else return page.value && (page.value.content.length != 0 || page.value.hero.title || page.value.hero.banner);
 });
 
 if (isCollectionDetail) {
@@ -103,13 +109,21 @@ if (isCollectionDetail) {
   ];
 
   for (const element of collectionOfDetail) {
-    const { data: details } = await useAsyncData(() =>
+    const detailKey = `detail-${element}-${activePath.value.substring(activePath.value.lastIndexOf("/") + 1)}`;
+    const { data: details } = await useAsyncData(
+      detailKey,
+      () =>
         find<Article | Operation | Event | Vehicle>(element ?? "", {
           populate: "*",
           filters: {
-          slug: activePath.value.substring(activePath.value.lastIndexOf("/") + 1),
+            slug: {
+              $eq: activePath.value.substring(activePath.value.lastIndexOf("/") + 1),
             },
-      })
+          },
+        }),
+      {
+        watch: [activePath],
+      }
     );
     if (details.value?.data[0]) {
       detail.value = details.value?.data[0];

app/pages/index.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import type Homepage from "../types/single/homepage";
+import type Homepage from "~~/types/single/homepage";
 
 const { findOne } = useStrapi();
 

app/plugins/global.ts

@@ -1,4 +1,4 @@
-import type Global from "../types/single/global";
+import type Global from "~~/types/single/global";
 
 export default defineNuxtPlugin(async (nuxtApp) => {
   const globalState = useState<Global | null>("global", () => null);

app/plugins/sitemap.ts

@@ -1,17 +1,25 @@
-import type Page from "../types/collection/page";
+import type Page from "~~/types/collection/page";
-import type Global from "../types/single/global";
+import type Global from "~~/types/single/global";
 
 export default defineNuxtPlugin(async (nuxtApp) => {
   const pageState = useState<Page[]>("sitemap_pages", () => []);
 
-  if (!pageState.value) {
+  if (pageState.value.length == 0) {
     const { find } = useStrapi();
     const { data: page_res } = await useAsyncData(
       "sitemap_pages",
       () =>
         find<Page>("pages", {
           filters: {
-            ref_only_access: false,
+            //@ts-ignore
+            $or: [
+              {
+                ref_only_access: { $eq: false },
+              },
+              {
+                ref_only_access: { $null: true },
+              },
+            ],
           },
         }),
       {

nuxt.config.ts

@@ -18,6 +18,8 @@ export default defineNuxtConfig({
     },
   },
 
+  ssr: true,
+
   css: ["~/assets/app.css", "~/assets/ConthraxSemiBold.css"],
 
   compatibilityDate: "2024-04-03",

package.json

@@ -12,14 +12,14 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@nuxt/image": "^1.8.1",
+    "@nuxt/image": "^1.10.0",
-    "@nuxtjs/strapi": "^2.0.0",
+    "@nuxtjs/strapi": "^2.1.1",
-    "@tailwindcss/vite": "^4.1.4",
+    "@tailwindcss/vite": "^4.1.11",
-    "nuxt": "^3.16.2",
+    "nuxt": "^4.0.1",
     "vue": "latest",
     "vue-router": "latest"
   },
   "devDependencies": {
-    "tailwindcss": "^4.1.4"
+    "tailwindcss": "^4.1.11"
   }
 }

types/collection/page.ts

@@ -12,5 +12,6 @@ export default interface Page {
   slug: string;
   hero: ItemsHero;
   content: Array<ComponentTypes>;
+  ref_only_access: boolean;
   localizations: any[];
 }