Skip to content

Commit 664afb8

Browse files
s00ds00d
committed
feat(async-components): add initial configuration and dependencies
1 parent 810a15e commit 664afb8

28 files changed

Lines changed: 1814 additions & 0 deletions

‎test/fixtures/async-components/components/test/AsyncComponentWithError.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div class="async-component-with-error">
3+
<h3>{{ $t('async-component-with-error::title') }}</h3>
4+
<p>{{ $t('async-component-with-error::description') }}</p>
5+
</div>
6+
</template>
7+
8+
<script setup lang="ts">
9+
import { useNuxtApp } from '#imports'
10+
11+
const { $defineI18nRoute, $t } = useNuxtApp()
12+
13+
$defineI18nRoute({
14+
locales: {
15+
en: {
16+
'async-component-with-error::title': 'Error loading component',
17+
'async-component-with-error::description': 'This component simulates an error',
18+
},
19+
ru: {
20+
'async-component-with-error::title': 'Ошибка загрузки компонента',
21+
'async-component-with-error::description': 'Этот компонент симулирует ошибку',
22+
},
23+
de: {
24+
'async-component-with-error::title': 'Fehler beim Laden der Komponente',
25+
'async-component-with-error::description': 'Diese Komponente simuliert einen Fehler',
26+
},
27+
},
28+
})
29+
</script>
30+
31+
<style scoped>
32+
.async-component-with-error {
33+
padding: 15px;
34+
background: #ffe8e8;
35+
border-radius: 5px;
36+
margin: 10px 0;
37+
}
38+
</style>

‎test/fixtures/async-components/components/test/AsyncComponentWithI18nRoute.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<div class="async-component-with-i18n-route">
3+
<h3>{{ $t('async-component-with-i18n-route::title') }}</h3>
4+
<p>{{ $t('async-component-with-i18n-route::description') }}</p>
5+
<div class="route-info">
6+
<p>{{ $t('async-component-with-i18n-route::routeInfo.currentRoute') }}: {{ $getRouteName() }}</p>
7+
<p>{{ $t('async-component-with-i18n-route::routeInfo.localeRoute') }}: {{ $getLocale() }}</p>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script setup lang="ts">
13+
import { useNuxtApp } from '#imports'
14+
15+
const { $defineI18nRoute, $getRouteName, $getLocale, $t } = useNuxtApp()
16+
17+
$defineI18nRoute({
18+
locales: {
19+
en: {
20+
'async-component-with-i18n-route::title': 'Async Component with defineI18nRoute Loaded',
21+
'async-component-with-i18n-route::description': 'This component uses defineI18nRoute function',
22+
'async-component-with-i18n-route::routeInfo.currentRoute': 'Current Route',
23+
'async-component-with-i18n-route::routeInfo.localeRoute': 'Current Locale',
24+
},
25+
ru: {
26+
'async-component-with-i18n-route::title': 'Асинхронный Компонент с defineI18nRoute Загружен',
27+
'async-component-with-i18n-route::description': 'Этот компонент использует функцию defineI18nRoute',
28+
'async-component-with-i18n-route::routeInfo.currentRoute': 'Текущий Маршрут',
29+
'async-component-with-i18n-route::routeInfo.localeRoute': 'Текущая Локаль',
30+
},
31+
de: {
32+
'async-component-with-i18n-route::title': 'Async-Komponente mit defineI18nRoute Geladen',
33+
'async-component-with-i18n-route::description': 'Diese Komponente verwendet die defineI18nRoute-Funktion',
34+
'async-component-with-i18n-route::routeInfo.currentRoute': 'Aktuelle Route',
35+
'async-component-with-i18n-route::routeInfo.localeRoute': 'Aktuelle Lokale',
36+
},
37+
},
38+
})
39+
</script>
40+
41+
<style scoped>
42+
.async-component-with-i18n-route {
43+
padding: 15px;
44+
background: #f0f8ff;
45+
border-radius: 5px;
46+
margin: 10px 0;
47+
}
48+
49+
.route-info {
50+
margin-top: 10px;
51+
font-size: 0.9em;
52+
color: #666;
53+
}
54+
</style>

‎test/fixtures/async-components/components/test/AsyncComponentWithTranslations.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div class="async-component-with-translations">
3+
<h3>{{ $t('async-component-with-translations::title') }}</h3>
4+
<p>{{ $t('async-component-with-translations::description') }}</p>
5+
</div>
6+
</template>
7+
8+
<script setup lang="ts">
9+
import { useNuxtApp } from '#imports'
10+
11+
const { $defineI18nRoute, $t } = useNuxtApp()
12+
13+
$defineI18nRoute({
14+
locales: {
15+
en: {
16+
'async-component-with-translations::title': 'Async Component with Translations Loaded',
17+
'async-component-with-translations::description': 'This component has its own translations',
18+
},
19+
ru: {
20+
'async-component-with-translations::title': 'Асинхронный Компонент с Переводами Загружен',
21+
'async-component-with-translations::description': 'Этот компонент имеет свои переводы',
22+
},
23+
de: {
24+
'async-component-with-translations::title': 'Async-Komponente mit Übersetzungen Geladen',
25+
'async-component-with-translations::description': 'Diese Komponente hat ihre eigenen Übersetzungen',
26+
},
27+
},
28+
})
29+
</script>
30+
31+
<style scoped>
32+
.async-component-with-translations {
33+
padding: 15px;
34+
background: #e8f4fd;
35+
border-radius: 5px;
36+
margin: 10px 0;
37+
}
38+
</style>

‎test/fixtures/async-components/components/test/AsyncDynamicComponent.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div class="async-dynamic-component">
3+
<h3>{{ $t('async-dynamic-component::title') }}</h3>
4+
<p>{{ $t('async-dynamic-component::description') }}</p>
5+
</div>
6+
</template>
7+
8+
<script setup lang="ts">
9+
import { useNuxtApp } from '#imports'
10+
11+
const { $defineI18nRoute, $t } = useNuxtApp()
12+
13+
$defineI18nRoute({
14+
locales: {
15+
en: {
16+
'async-dynamic-component::title': 'Dynamic Async Component Loaded',
17+
'async-dynamic-component::description': 'This component was loaded dynamically',
18+
},
19+
ru: {
20+
'async-dynamic-component::title': 'Динамический Асинхронный Компонент Загружен',
21+
'async-dynamic-component::description': 'Этот компонент был загружен динамически',
22+
},
23+
de: {
24+
'async-dynamic-component::title': 'Dynamische Async-Komponente Geladen',
25+
'async-dynamic-component::description': 'Diese Komponente wurde dynamisch geladen',
26+
},
27+
},
28+
})
29+
</script>
30+
31+
<style scoped>
32+
.async-dynamic-component {
33+
padding: 15px;
34+
background: #e8f8e8;
35+
border-radius: 5px;
36+
margin: 10px 0;
37+
}
38+
</style>

‎test/fixtures/async-components/components/test/ConditionalAsyncComponent.vue‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<template>
2+
<div class="conditional-async-component">
3+
<h3>{{ $t('conditional-async-component::title') }}</h3>
4+
<p>{{ $t('conditional-async-component::description') }}</p>
5+
<div class="component-info">
6+
<p><strong>{{ $t('conditional-async-component::componentId') }}:</strong> Conditional Async Component</p>
7+
<p><strong>{{ $t('conditional-async-component::status') }}:</strong> {{ $t('conditional-async-component::active') }}</p>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script setup lang="ts">
13+
import { useNuxtApp } from '#imports'
14+
15+
const { $defineI18nRoute, $t } = useNuxtApp()
16+
17+
$defineI18nRoute({
18+
locales: {
19+
en: {
20+
'conditional-async-component::title': 'Conditional Async Component Loaded',
21+
'conditional-async-component::description': 'This component loads conditionally',
22+
'conditional-async-component::componentId': 'Component ID',
23+
'conditional-async-component::status': 'Status',
24+
'conditional-async-component::active': 'Active',
25+
},
26+
ru: {
27+
'conditional-async-component::title': 'Условный Асинхронный Компонент Загружен',
28+
'conditional-async-component::description': 'Этот компонент загружается условно',
29+
'conditional-async-component::componentId': 'ID Компонента',
30+
'conditional-async-component::status': 'Статус',
31+
'conditional-async-component::active': 'Активен',
32+
},
33+
de: {
34+
'conditional-async-component::title': 'Bedingte Async-Komponente Geladen',
35+
'conditional-async-component::description': 'Diese Komponente wird bedingt geladen',
36+
'conditional-async-component::componentId': 'Komponenten-ID',
37+
'conditional-async-component::status': 'Status',
38+
'conditional-async-component::active': 'Aktiv',
39+
},
40+
},
41+
})
42+
</script>
43+
44+
<style scoped>
45+
.conditional-async-component {
46+
padding: 15px;
47+
background: #d1ecf1;
48+
border-radius: 5px;
49+
margin: 10px 0;
50+
}
51+
52+
.component-info {
53+
margin-top: 10px;
54+
font-size: 0.9em;
55+
}
56+
57+
.component-info p {
58+
margin: 5px 0;
59+
}
60+
</style>

‎test/fixtures/async-components/components/test/DelayedAsyncComponent.vue‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<div class="delayed-async-component">
3+
<h3>{{ $t('delayed-async-component::title') }}</h3>
4+
<p>{{ $t('delayed-async-component::description') }}</p>
5+
<div
6+
v-if="isLoading"
7+
class="loading-indicator"
8+
>
9+
{{ $t('delayed-async-component::loading') }}
10+
</div>
11+
<div
12+
v-else
13+
class="loaded-content"
14+
>
15+
{{ $t('delayed-async-component::loaded') }}
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script setup lang="ts">
21+
import { ref, onMounted } from 'vue'
22+
import { useNuxtApp } from '#imports'
23+
24+
const { $defineI18nRoute, $t } = useNuxtApp()
25+
26+
const isLoading = ref(true)
27+
28+
$defineI18nRoute({
29+
locales: {
30+
en: {
31+
'delayed-async-component::title': 'Delayed Async Component Loaded',
32+
'delayed-async-component::description': 'This component simulates a loading delay',
33+
'delayed-async-component::loading': 'Loading...',
34+
'delayed-async-component::loaded': 'Component loaded successfully!',
35+
},
36+
ru: {
37+
'delayed-async-component::title': 'Отложенный Асинхронный Компонент Загружен',
38+
'delayed-async-component::description': 'Этот компонент симулирует задержку загрузки',
39+
'delayed-async-component::loading': 'Загрузка...',
40+
'delayed-async-component::loaded': 'Компонент успешно загружен!',
41+
},
42+
de: {
43+
'delayed-async-component::title': 'Verzögerte Async-Komponente Geladen',
44+
'delayed-async-component::description': 'Diese Komponente simuliert eine Ladeverzögerung',
45+
'delayed-async-component::loading': 'Laden...',
46+
'delayed-async-component::loaded': 'Komponente erfolgreich geladen!',
47+
},
48+
},
49+
})
50+
51+
onMounted(() => {
52+
// Симулируем задержку загрузки
53+
setTimeout(() => {
54+
isLoading.value = false
55+
}, 1000)
56+
})
57+
</script>
58+
59+
<style scoped>
60+
.delayed-async-component {
61+
padding: 15px;
62+
background: #fff3cd;
63+
border-radius: 5px;
64+
margin: 10px 0;
65+
}
66+
67+
.loading-indicator {
68+
color: #856404;
69+
font-style: italic;
70+
}
71+
72+
.loaded-content {
73+
color: #155724;
74+
font-weight: bold;
75+
}
76+
</style>

0 commit comments

Comments
 (0)