Cách sử dụng Vuejs và CMS Strapi để làm chức năng đa ngôn ngữ

Question

Em đang sử dụng VueJS để làm giao diện và quản lý CMS + nội dung bằng Strapi, Strapi đã hỗ trợ em tạo ra các bản ghi đa ngôn ngữ trong một bảng dữ liệu chỉ cần khi call api gọi theo đúng cái key lo...

Accepted Answer

Bạn tham khảo thử cách sau.

Ví dụ Strapi API bạn có route /api/movies để lấy danh sách phim từ Strapi. Khi call API thì nhận được content dạng như:

{
  "data": [
    {
      "id": 1,
      "attributes": {
        "name": "The Terminator",
        "slug": "the-terminator",
        "description": "Super robot saves the world from evil AI",
        "locale": "en"
      }
    }
  ]
}

Danh sách phim đã được đa ngữ sẽ có 2 route /api/movies?locale=en (EN) và /api/movies?locale=vi (VI). Route VI của bạn sẽ có dạng như:

{
  "data": [
    {
      "id": 1,
      "attributes": {
        "name": "Kẻ hủy diệt",
        "slug": "ke-huy-diet",
        "description": "Siêu người máy giải cứu khỏi bọn AI xấu xa",
        "locale": "vi"
      }
    }
  ]
}

Như bạn thấy thì chỉ có phần content được thay đổi cho đa ngữ, các attribute key như name, description vẫn giống nhau, nên trong Vue component, sau khi mount, bạn chỉ việc gọi đến API route tương ứng rồi render dựa theo các key đó là được.

<template>
  <ul>
    <li v-for="movie in movies" :key="movie.id">
      <h2>{{ movie.name }}</h2>
      <p>{{ movie.description }}</p>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      movies: []
    };
  },
  async mounted() {
    const { data } = await fetch(`/api/movies?locale=${locale}`);
    this.movies = data;
  }
};
</script>

locale bạn có thấy truy xuất từ route nếu dùng vue router, hoặc từ prop của component, hoặc thậm chí từ localStorage.

1 CÂU TRẢ LỜI