Last active
July 2, 2025 10:06
-
-
Save atomjoy/9962da73d4dbf45fa15f2425c4015a2f to your computer and use it in GitHub Desktop.
Load JSON translations dynamically from API in Vue 3 component with axios.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script setup> | |
| import { onBeforeMount, ref, watch } from 'vue'; | |
| import { useI18n } from 'vue-i18n'; | |
| let { locale } = useI18n({ useScope: 'global' }); | |
| let list = ref(null); | |
| onBeforeMount(async () => { | |
| await load(); | |
| }); | |
| watch( | |
| () => locale.value, | |
| async (locale) => { | |
| console.log('Locale', locale); | |
| } | |
| ); | |
| async function load() { | |
| // Json updated from admin panel when data changed or data from api | |
| let res = await axios.get('/storage/setup.json'); | |
| list.value = res.data; | |
| } | |
| </script> | |
| <template> | |
| <div class="page_meal_top"> | |
| <div class="page_meal_header"> | |
| <a href="/"> | |
| <img class="page_meal_logo" src="/default/homepage/logo-dark.png" alt="Logo" /> | |
| </a> | |
| </div> | |
| <div class="page_meal_menu"> | |
| <slot> | |
| <RouterLink to="/" :title="$t('Home')">{{ $t('Home') }}</RouterLink> | |
| <RouterLink to="/about" :title="$t('About')" rel="nofollow">{{ $t('About') }}</RouterLink> | |
| <RouterLink to="/contact" :title="$t('Contact')" rel="nofollow">{{ $t('Contact') }}</RouterLink> | |
| <RouterLink to="/subscribe" :title="$t('Subscribe')" rel="nofollow">{{ $t('Subscribe') }}</RouterLink> | |
| </slot> | |
| </div> | |
| <div class="animate__animated animate__tada page_meal_logo_text"> | |
| <span v-if="locale != 'en'"> | |
| {{ list.page_home_company.message }} | |
| </span> | |
| <span v-else> | |
| {{ list.page_home_company.message_en }} | |
| </span> | |
| </div> | |
| </div> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script setup> | |
| import { computed } from 'vue'; | |
| import { useI18n } from 'vue-i18n'; | |
| const props = defineProps({ | |
| item: { default: null }, | |
| }); | |
| // Local translate | |
| let { t } = useI18n({ | |
| // useScope: 'global', // Overwrite global | |
| // locale: 'en', | |
| messages: { | |
| pl: { | |
| msg: 'Cześć', | |
| meal_btn_default: 'Zamów teraz', | |
| meal_btn_info: 'Zobacz', | |
| meal_title: props.item?.title, | |
| meal_message: props.item?.message, | |
| }, | |
| en: { | |
| msg: 'Hello', | |
| meal_btn_default: 'Order now', | |
| meal_btn_info: 'See more', | |
| meal_title: props.item?.title_en ?? props.item?.title, | |
| meal_message: props.item?.message_en ?? props.item?.message, | |
| }, | |
| }, | |
| }); | |
| const msg = computed(() => t('msg')); | |
| </script> | |
| <template> | |
| <a :href="item.url" class="page_meal_link" target="_blank" :title="t('meal_title')"> | |
| <img class="page_meal_image" :src="'/img/show?path=' + item.path" :alt="$t(item.type)" /> | |
| </a> | |
| <div class="page_meal_type" :class="'page_meal_type_' + item.type">{{ $t(item.type) }}</div> | |
| <div class="page_meal_title">{{ t('meal_title') }}</div> | |
| <div class="page_meal_message">{{ t('meal_message') }}</div> | |
| <div class="page_meal_buttons"> | |
| <a v-if="item.type != 'info'" :href="item.url" class="page_meal_more" :class="'page_meal_more_' + item.type" target="_blank" :title="t('meal_btn_default')"> | |
| {{ t('meal_btn_default') }} | |
| </a> | |
| <a v-if="item.type == 'info'" :href="item.url" class="page_meal_more" :class="'page_meal_more_' + item.type" target="_blank" :title="t('meal_btn_info')"> | |
| {{ t('meal_btn_info') }} | |
| </a> | |
| </div> | |
| <div class="page_meal_date"> | |
| {{ item.published_at }} | |
| </div> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "page_seo_home_title": { | |
| "message": "Witaj!", | |
| "message_en": "Welcome!", | |
| "path": null | |
| }, | |
| "page_seo_home_description": { | |
| "message": "Opis strony w wynikach wyszukiwania.", | |
| "message_en": "Home page head description.", | |
| "path": null | |
| }, | |
| "page_meal_title": { | |
| "message": "Dzisiaj Polecamy", | |
| "message_en": "Today We Recommend", | |
| "path": null | |
| }, | |
| "page_meal_text": { | |
| "message": "Zapraszamy na smaczny obiad ka\u017cdego dnia.", | |
| "message_en": "We invite you for a tasty lunch every day.", | |
| "path": null | |
| }, | |
| "page_newsletter_title": { | |
| "message": "Zapisz si\u0119 do Newslettera", | |
| "message_en": "Subscribe to the Newsletter", | |
| "path": null | |
| }, | |
| "page_newsletter_text": { | |
| "message": "Zapisz si\u0119 na powiadomienia ju\u017c dzi\u015b.", | |
| "message_en": "Sign up for notifications today.", | |
| "path": null | |
| }, | |
| "page_dish_title": { | |
| "message": "Nasze Inne Dania", | |
| "message_en": "Our Other Dishes", | |
| "path": null | |
| }, | |
| "page_dish_text": { | |
| "message": "Dania kt\u00f3re polecamy do spr\u00f3bowania.", | |
| "message_en": "Dishes that we recommend trying.", | |
| "path": null | |
| }, | |
| "page_home_company": { | |
| "message": "Food Lovers", | |
| "message_en": "Food Lovers", | |
| "path": null | |
| }, | |
| "page_mobile": { | |
| "message": "500 599 599", | |
| "message_en": "500 599 599", | |
| "path": null | |
| }, | |
| "page_footer_company": { | |
| "message": "Food Lovers", | |
| "message_en": "Food Lovers", | |
| "path": null | |
| }, | |
| "page_username_instagram": { | |
| "message": "username", | |
| "message_en": "username", | |
| "path": null | |
| }, | |
| "page_username_x": { | |
| "message": "username", | |
| "message_en": "username", | |
| "path": null | |
| }, | |
| "page_username_facebook": { | |
| "message": "username", | |
| "message_en": "username", | |
| "path": null | |
| }, | |
| "page_seo_about_title": { | |
| "message": "O Nas", | |
| "message_en": "About Us", | |
| "path": null | |
| }, | |
| "page_seo_about_description": { | |
| "message": "\ud83c\udf31 Smaczne ro\u015blinne dania w Warszawie. Restauracja 100% wega\u0144ska dla mi\u0142o\u015bnik\u00f3w bezmi\u0119snej kuchni \ud83e\udd57", | |
| "message_en": "\ud83c\udf31 Tasty plant-based dishes in Warsaw. A 100% vegan restaurant for meatless cuisine lovers \ud83e\udd57", | |
| "path": null | |
| }, | |
| "page_about_text": { | |
| "message": "\ud83c\udf31 Smaczne ro\u015blinne dania w Warszawie. Restauracja 100% wega\u0144ska dla mi\u0142o\u015bnik\u00f3w bezmi\u0119snej kuchni \ud83e\udd57", | |
| "message_en": "\ud83c\udf31 Tasty plant-based dishes in Warsaw. A 100% vegan restaurant for meatless cuisine lovers \ud83e\udd57", | |
| "path": null | |
| }, | |
| "page_about_title": { | |
| "message": "O Nas", | |
| "message_en": "About Us", | |
| "path": null | |
| }, | |
| "page_website_url": { | |
| "message": "https:\/\/example.com\/menu", | |
| "message_en": "https:\/\/example.com\/menu", | |
| "path": null | |
| }, | |
| "page_seo_contact_title": { | |
| "message": "Kontakt", | |
| "message_en": "Contact", | |
| "path": null | |
| }, | |
| "page_seo_contact_description": { | |
| "message": "Chcesz dowiedzie\u0107 si\u0119 wi\u0119cej o naszej ofercie lub masz pytania dotycz\u0105ce naszej firmy? Jeste\u015bmy tu, aby Ci pom\u00f3c! Wype\u0142nij poni\u017cszy formularz, a my skontaktujemy si\u0119 z Tob\u0105 tak szybko, jak to mo\u017cliwe.", | |
| "message_en": "Want to learn more about what we offer or have questions about our company? We're here to help! Fill out the form below and we'll get back to you as soon as possible.", | |
| "path": null | |
| }, | |
| "page_contact_title": { | |
| "message": "Masz pytanie? Skontaktuj si\u0119 z nami.", | |
| "message_en": "Have a question? Contact us.", | |
| "path": null | |
| }, | |
| "page_contact_text": { | |
| "message": "Chcesz dowiedzie\u0107 si\u0119 wi\u0119cej o naszej ofercie lub masz pytania dotycz\u0105ce naszej firmy? Jeste\u015bmy tu, aby Ci pom\u00f3c! Wype\u0142nij poni\u017cszy formularz, a my skontaktujemy si\u0119 z Tob\u0105 tak szybko, jak to mo\u017cliwe.", | |
| "message_en": "Want to learn more about what we offer or have questions about our company? We're here to help! Fill out the form below and we'll get back to you as soon as possible.", | |
| "path": null | |
| }, | |
| "page_email": { | |
| "message": "[email protected]", | |
| "message_en": "[email protected]", | |
| "path": null | |
| }, | |
| "page_country": { | |
| "message": "Polska", | |
| "message_en": "Poland", | |
| "path": null | |
| }, | |
| "page_city": { | |
| "message": "00-100 Warszawa", | |
| "message_en": "00-100 Warsaw", | |
| "path": null | |
| }, | |
| "page_street": { | |
| "message": "Klasyczna 159", | |
| "message_en": "Klasyczna 159", | |
| "path": null | |
| }, | |
| "page_open_time": { | |
| "message": "Pn - Pt 10:00 - 20:00", | |
| "message_en": "Mon - Fri 10:00 - 20:00", | |
| "path": null | |
| }, | |
| "page_map_logo": { | |
| "message": "http:\/\/127.0.0.1:8000\/default\/logo\/logo-light.png", | |
| "message_en": "http:\/\/127.0.0.1:8000\/default\/logo\/logo-light.png", | |
| "path": null | |
| }, | |
| "page_map_company": { | |
| "message": "Food Lovers", | |
| "message_en": "Food Lovers", | |
| "path": null | |
| }, | |
| "page_location_lat": { | |
| "message": "52.22977", | |
| "message_en": "52.22977", | |
| "path": null | |
| }, | |
| "page_location_lng": { | |
| "message": "21.01178", | |
| "message_en": "21.01178", | |
| "path": null | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script setup> | |
| import { onBeforeMount, ref, watch } from 'vue'; | |
| import { useI18n } from 'vue-i18n'; | |
| let { locale } = useI18n({ useScope: 'global' }); | |
| let list = ref(null); | |
| onBeforeMount(async () => { | |
| await loadSetup(); | |
| // Or | |
| // let data = await loadSetup(); | |
| // list.value = data; | |
| // console.log('LoadJson', list.value); | |
| }); | |
| watch( | |
| () => locale.value, | |
| async (lang) => { | |
| console.log('Locale', lang); | |
| // await loadSetup(); | |
| } | |
| ); | |
| async function loadSetup() { | |
| let res = await axios.get('/storage/setup.json'); | |
| list.value = res.data; | |
| // console.log('LoadJson', list.value); | |
| // Or | |
| // return new Promise((resolve, reject) => { | |
| // axios.get('/storage/setup.json').then((res) => { | |
| // resolve(res.data); | |
| // }); | |
| // }); | |
| } | |
| </script> | |
| <template> | |
| <h2>Load Json Translations</h2> | |
| <span v-if="locale != 'en'"> | |
| {{ list?.page_home_company?.message ?? 'page_home_company' }} | |
| </span> | |
| <span v-else> | |
| {{ list?.page_home_company?.message_en ?? 'page_home_company' }} | |
| </span> | |
| </template> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment