Locale support for directus translations

[lumos94]

Hello,

I am developing a nuxt application to serve as a landing page provider. My CMS is of course Directus where all the content will be uploaded there and be retrieved later to my nuxt app using nuxt-directus. Landing pages will be available in various languages and I am trying to see how I can implement that. Currently I haven't seen anything in the documentation about that. Is it possible to do it and if so how? are there any examples?

[lumos94]

@Intevel any ideas?

[casualmatt]

U can query the page in the correct language using the deep filters.

If you share some code it is easier to help u or give u suggestions.

[lumos94]

Thanks for the reply,
I haven't wrote much of code as I am trying to experiment with it. My goal is to have one file per LP that based on the routing will show the appropriate language to the user. for example: https://www.my-example-lp.com/test-lp will show the test-lp in English and https://www.my-example-lp.com/es/test-lp will show the test-lp in Spanish. The LPs will be static generated. I would like to know if this is possible and maybe develop a couple of examples in both TypeScript and JavaScript to be added in the documentation.

<template>
  <div>
  <h1>{{products.title}}</h1>
    <img :src="getThumbnail(products.test_image)" alt="original" width="100"/>

  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'

const {getItems} = useDirectusItems();
const {getThumbnail} = useDirectusFiles();

const products = await getItems({
  collection: 'test_collection',
  params: {
    fields: ['*', 'translations.*'],
    limit: 1
  }
})

//taken from the docs 
// interface Product {
// 	id: number;
// 	title: string;
//   test_image:string;
// }
// const products = await getItems<Product>({
//     collection: "test_collection"
// });
</script>

products returns the following object

      {
  "id": 1,
  "user_created": "503339da-e93b-4b36-ac5f-9177e4d764f8",
  "date_created": "2023-11-13T15:04:15.794Z",
  "user_updated": "503339da-e93b-4b36-ac5f-9177e4d764f8",
  "date_updated": "2023-11-13T17:20:26.690Z",
  "test_image": "77304dff-ebf3-4e5a-9f27-4d8ca3a55361",
  "translations": [
    {
      "id": 1,
      "test_collection_id": 1,
      "languages_code": "en-US",
      "title": "hello",
      "trans_image": "48c6c8b6-79b1-44be-8501-7d5ef7e4c8b7"
    },
    {
      "id": 2,
      "test_collection_id": 1,
      "languages_code": "es-ES",
      "title": "Hola",
      "trans_image": "e548c493-358f-4237-beb8-6677333a1c6e"
    },
    {
      "id": 3,
      "test_collection_id": 1,
      "languages_code": "pt-BR",
      "title": "Hey",
      "trans_image": "1c0bbf7c-2fe9-4246-ba07-2769f1067146"
    },
    {
      "id": 4,
      "test_collection_id": 1,
      "languages_code": "vi-VN",
      "title": "ty",
      "trans_image": "fad7bc16-383d-4469-aeef-8c9e5757d98f"
    }
  ]
}

[casualmatt]

Are u using nuxt i18n ? Is that configured.
Because with that routing is easy to manage and u will be able to access the current language with a composable and then filter your result using the deep field from directus.

[lumos94]

I haven't added it as I have seen that there isn't a stable version yet but it is something that I had in mind.

[lumos94]

I updated the code to this but I am getting all translations back. it is like the filtering does not work on nested objects

const fetchArticles = async () => {
  try {
    const filters = {
      "translations": {
        "languages_code": {
          "_eq": "vi-VN"
        }
      },
    };

    const items = await getItems<Article>({
      collection: "test_collection",
      params: {
        filter: filters,
        fields: ['*', 'translations.*'],

      },
    });
    data.value = items
  } catch (e) {
    console.error("Error fetching articles:", e);
  }
}

[lumos94]

found a solution! the syntax was wrong. is there any way to update the documentation and add it as an example?

 const filters = {
      translations: {
        _filter: {
          languages_code: {_eq: "es-ES"},
        },
      }
    };

    const items = await getItems<Article>({
      collection: "test_collection",
      params: {
        fields: ['*', 'translations.*'],
        deep: filters,
      },
    });

[Intevel]

If you can create a Pull Request, this would help 👍🏼

[lumos94]

I will soon! Thanks. Shall I add it as an example?

[Intevel]

Yes please