phundrak.com/frontend/app/composables/useDataJson.ts

import { withLeadingSlash } from 'ufo';
import type { Collections } from '@nuxt/content';

export const useDataJson = (prefix: string) => {
  const route = useRoute();
  const { locale } = useI18n();

  const slug = computed(() => {
    // Use route.params.slug for dynamic routes, or route.path for static routes
    const slugValue = route.params.slug || route.path;
    return withLeadingSlash(String(slugValue));
  });
  const key = computed(() => prefix + '-' + slug.value);

  const getJsonData = async (collectionPrefix: string = 'content_data_') => {
    const { data } = await useAsyncData(key.value, async () => {
      const collection = (collectionPrefix + locale.value) as keyof Collections;
      const allData = await queryCollection(collection).all();
      const filtered = allData.filter((source) => source.meta.path == slug.value)[0];
      return filtered?.meta;
    }, {
      watch: [locale], // Automatically refresh when locale changes
    });
    return data;
  };

  const getCachedData = () => {
    const { data } = useNuxtData(key.value);
    return data;
  };

  return { getJsonData, getCachedData };
};