@@ -143,6 +143,20 @@ createInertiaApp({
143143});
144144```
145145
146+ ** TypeScript Declaration**
147+
148+ To ensure type safety when accessing ` window.localizer ` , add this global declaration to your project:
149+
150+ ``` typescript
151+ declare global {
152+ interface Window {
153+ localizer: {
154+ translations: typeof translations ;
155+ };
156+ }
157+ }
158+ ```
159+
146160** Alternative: Create a separate file**
147161
148162** File: ` resources/js/lang/index.ts ` **
@@ -181,6 +195,7 @@ Add types to your `tsconfig.json`:
181195### Basic Usage
182196
183197``` vue
198+ {% raw %}
184199<script setup lang="ts">
185200import { useLocalizer } from '@devwizard/laravel-localizer-vue';
186201
@@ -193,11 +208,13 @@ const { __ } = useLocalizer();
193208 <p>{{ __('validation.required') }}</p>
194209 </div>
195210</template>
211+ {% endraw %}
196212```
197213
198214### With Replacements
199215
200216``` vue
217+ {% raw %}
201218<script setup lang="ts">
202219import { useLocalizer } from '@devwizard/laravel-localizer-vue';
203220
@@ -217,11 +234,13 @@ const itemCount = 5;
217234 <!-- "You have {count} items" → "You have 5 items" -->
218235 </div>
219236</template>
237+ {% endraw %}
220238```
221239
222240### Pluralization
223241
224242``` vue
243+ {% raw %}
225244<script setup lang="ts">
226245import { useLocalizer } from '@devwizard/laravel-localizer-vue';
227246
@@ -244,11 +263,13 @@ const count = ref(5);
244263 <!-- "You have {count} apples" → "You have 5 apples" -->
245264 </div>
246265</template>
266+ {% endraw %}
247267```
248268
249269### Checking Translation Existence
250270
251271``` vue
272+ {% raw %}
252273<script setup lang="ts">
253274import { useLocalizer } from '@devwizard/laravel-localizer-vue';
254275
@@ -265,11 +286,13 @@ const { __, has } = useLocalizer();
265286 <p v-else>Default message</p>
266287 </div>
267288</template>
289+ {% endraw %}
268290```
269291
270292### With Fallback
271293
272294``` vue
295+ {% raw %}
273296<script setup lang="ts">
274297import { useLocalizer } from '@devwizard/laravel-localizer-vue';
275298
@@ -282,11 +305,13 @@ const { __ } = useLocalizer();
282305 <p>{{ __('might.not.exist', {}, 'Default Text') }}</p>
283306 </div>
284307</template>
308+ {% endraw %}
285309```
286310
287311### Locale Information (Reactive)
288312
289313``` vue
314+ {% raw %}
290315<script setup lang="ts">
291316import { useLocalizer } from '@devwizard/laravel-localizer-vue';
292317
@@ -306,11 +331,13 @@ const { locale, dir, availableLocales } = useLocalizer();
306331 </select>
307332 </div>
308333</template>
334+ {% endraw %}
309335```
310336
311337### RTL Support
312338
313339``` vue
340+ {% raw %}
314341<script setup lang="ts">
315342import { useLocalizer } from '@devwizard/laravel-localizer-vue';
316343
@@ -323,11 +350,13 @@ const { __, dir } = useLocalizer();
323350 <p>{{ __('description') }}</p>
324351 </div>
325352</template>
353+ {% endraw %}
326354```
327355
328356### Accessing All Translations
329357
330358``` vue
359+ {% raw %}
331360<script setup lang="ts">
332361import { useLocalizer } from '@devwizard/laravel-localizer-vue';
333362
@@ -340,6 +369,7 @@ const { translations } = useLocalizer();
340369 <pre>{{ JSON.stringify(translations, null, 2) }}</pre>
341370 </div>
342371</template>
372+ {% endraw %}
343373```
344374
345375## API Reference
@@ -413,6 +443,7 @@ npm run test:coverage
413443### Language Switcher
414444
415445``` vue
446+ {% raw %}
416447<script setup lang="ts">
417448import { router } from '@inertiajs/vue3';
418449import { useLocalizer } from '@devwizard/laravel-localizer-vue';
@@ -434,11 +465,13 @@ const changeLocale = (newLocale: string) => {
434465 </option>
435466 </select>
436467</template>
468+ {% endraw %}
437469```
438470
439471### Form Validation
440472
441473``` vue
474+ {% raw %}
442475<script setup lang="ts">
443476import { useLocalizer } from '@devwizard/laravel-localizer-vue';
444477import { useForm } from '@inertiajs/vue3';
@@ -478,11 +511,13 @@ const submit = () => {
478511 </button>
479512 </form>
480513</template>
514+ {% endraw %}
481515```
482516
483517### Composition API with Reactive Locale
484518
485519``` vue
520+ {% raw %}
486521<script setup lang="ts">
487522import { computed } from 'vue';
488523import { useLocalizer } from '@devwizard/laravel-localizer-vue';
@@ -506,6 +541,7 @@ const containerClass = computed(() => ({
506541 <p>Direction: {{ dir }}</p>
507542 </div>
508543</template>
544+ {% endraw %}
509545```
510546
511547## Complete Working Example
@@ -546,6 +582,7 @@ php artisan localizer:generate --all
546582** Frontend: ` resources/js/Pages/Dashboard.vue ` **
547583
548584``` vue
585+ {% raw %}
549586<script setup lang="ts">
550587import { Head } from '@inertiajs/vue3';
551588import { useLocalizer } from '@devwizard/laravel-localizer-vue';
@@ -612,11 +649,13 @@ const { __, choice, locale, dir } = useLocalizer();
612649 </div>
613650 </AuthenticatedLayout>
614651</template>
652+ {% endraw %}
615653```
616654
617655** Language Switcher Component:**
618656
619657``` vue
658+ {% raw %}
620659<script setup lang="ts">
621660import { useLocalizer } from '@devwizard/laravel-localizer-vue';
622661
@@ -641,6 +680,7 @@ const switchLocale = (newLocale: string) => {
641680 </select>
642681 </div>
643682</template>
683+ {% endraw %}
644684```
645685
646686** What happens:**
0 commit comments