Nuxt content / i18n / useAsyncData

Hello,

upgraded from nuxt3 to nuxt4 and everything works really fine except for something regarding content/i18n

My website is in EN and FR and also all the content pages:
content/blog <- md in english
content/fr <- md in french

I use useAsyncData to fetch articles in english or french.

The issue I am facing is when switching languages, it does not change the language of the article (before it was the case with nuxt3). On page load, there are no issues at all if I got the correct language set.

I think is has something to do with the change on useAsyncData but did not find anything yet

This is my composable for the article list

import type { BlogArticle } from "../types";

export const useBlog = () => {
    const articles = useState<BlogArticle[]>("articles", () => []);
    const featuredArticles = useState<BlogArticle[]>("featured", () => []);
    const {
        locale: { value: localCode },
    } = useI18n();

    let collection_name = "blog";
    if (localCode === "fr") {
        collection_name = "blogfr";
    }
    async function fetchList() {
        try {
            const { data } = await useAsyncData("blog-list", () => {
                return queryCollection(collection_name)
                    .where("extension", "=", "md")
                    .order("date", "DESC")
                    .all();
            });

            articles.value = data.value;
            featuredArticles.value = articles.value
                ?.filter((obj) => obj.featured)
                .slice(0, 1);
        } catch (e) {
            articles.value = [];
            featuredArticles.value = [];
            return e;
        }
    }

    return {
        articles,
        featuredArticles,
        fetchList,
    };
};

import type { BlogArticle } from "../types";

export const useBlog = () => {
    const articles = useState<BlogArticle[]>("articles", () => []);
    const featuredArticles = useState<BlogArticle[]>("featured", () => []);
    const {
        locale: { value: localCode },
    } = useI18n();

    let collection_name = "blog";
    if (localCode === "fr") {
        collection_name = "blogfr";
    }
    async function fetchList() {
        try {
            const { data } = await useAsyncData("blog-list", () => {
                return queryCollection(collection_name)
                    .where("extension", "=", "md")
                    .order("date", "DESC")
                    .all();
            });

            articles.value = data.value;
            featuredArticles.value = articles.value
                ?.filter((obj) => obj.featured)
                .slice(0, 1);
        } catch (e) {
            articles.value = [];
            featuredArticles.value = [];
            return e;
        }
    }

    return {
        articles,
        featuredArticles,
        fetchList,
    };
};

Nuxt•8mo ago•

15 replies

Kumzy

Nuxt content / i18n / useAsyncData

import type { BlogArticle } from "../types";

export const useBlog = () => {
    const articles = useState<BlogArticle[]>("articles", () => []);
    const featuredArticles = useState<BlogArticle[]>("featured", () => []);
    const {
        locale: { value: localCode },
    } = useI18n();

    let collection_name = "blog";
    if (localCode === "fr") {
        collection_name = "blogfr";
    }
    async function fetchList() {
        try {
            const { data } = await useAsyncData("blog-list", () => {
                return queryCollection(collection_name)
                    .where("extension", "=", "md")
                    .order("date", "DESC")
                    .all();
            });

            articles.value = data.value;
            featuredArticles.value = articles.value
                ?.filter((obj) => obj.featured)
                .slice(0, 1);
        } catch (e) {
            articles.value = [];
            featuredArticles.value = [];
            return e;
        }
    }

    return {
        articles,
        featuredArticles,
        fetchList,
    };
};

import type { BlogArticle } from "../types";

export const useBlog = () => {
    const articles = useState<BlogArticle[]>("articles", () => []);
    const featuredArticles = useState<BlogArticle[]>("featured", () => []);
    const {
        locale: { value: localCode },
    } = useI18n();

    let collection_name = "blog";
    if (localCode === "fr") {
        collection_name = "blogfr";
    }
    async function fetchList() {
        try {
            const { data } = await useAsyncData("blog-list", () => {
                return queryCollection(collection_name)
                    .where("extension", "=", "md")
                    .order("date", "DESC")
                    .all();
            });

            articles.value = data.value;
            featuredArticles.value = articles.value
                ?.filter((obj) => obj.featured)
                .slice(0, 1);
        } catch (e) {
            articles.value = [];
            featuredArticles.value = [];
            return e;
        }
    }

    return {
        articles,
        featuredArticles,
        fetchList,
    };
};

Nuxt content / i18n / useAsyncData

Nuxt content / i18n / useAsyncData

Similar Threads

Similar Threads

Similar Threads