feat: implement useLocalizer composable for translation management

- Added useLocalizer composable to handle translations in Vue 3 applications.
- Replaced useTranslation with useLocalizer in tests and components.
- Updated Vite plugin to support new translation generation logic.
- Enhanced translation handling with fallback and placeholder support.
- Improved test coverage for translation functionalities.
- Updated ESLint configuration to accommodate new plugin structure.
- Refactored project structure to separate src and composables.
- Bumped version to 0.0.2 and updated package description.

Author: iqbalhasandev

.npmignore

@@ -1,2 +1,19 @@
 node_modules
 dist
+src
+composables
+index.ts
+vite-plugin.ts
+__tests__
+*.test.ts
+*.test.tsx
+vitest.config.ts
+tsconfig.json
+tsup.config.ts
+eslint.config.js
+eslint.config.min.js
+.prettierrc.json
+.prettierignore
+.github
+.gitignore
+package-lock.json

CHANGELOG.md

@@ -2,6 +2,47 @@
 
 All notable changes to `@devwizard/laravel-localizer-vue` will be documented in this file.
 
+## v0.0.7 - 2025-11-09
+
+### 🔄 Major Update - Alignment with React Version
+
+- **Breaking Change**: Renamed `useTranslation` to `useLocalizer` for consistency with React version
+  - No backward compatibility - all imports must be updated
+  - Function signature and API remain the same
+
+- **File Structure**: Reorganized to match React package structure
+  - Created `src/` directory for all source files
+  - Moved `composables/useTranslation.ts` to `src/useLocalizer.ts`
+  - Renamed `vite-plugin.ts` to `src/vite-plugin-laravel-localizer.ts`
+
+- **Translation Loading**: Updated to use `window.localizer` object (consistent with React version)
+  - Changed from `window.__LARAVEL_LOCALIZER_TRANSLATIONS__` to `window.localizer.translations`
+  - Better integration with bootstrap.ts initialization
+  - Synchronous translation loading for improved performance
+
+- **Vite Plugin Improvements**: Updated to match React implementation
+  - Simplified plugin structure using `minimatch` for pattern matching
+  - Better error handling and logging
+  - Non-blocking command execution
+  - Changed from `watch` option to `patterns` option for consistency
+  - Removed debounce functionality for faster regeneration
+  - Uses `handleHotUpdate` hook instead of `configureServer`
+
+- **Dependencies**: Added `minimatch` for glob pattern matching
+
+- **Documentation**: Updated README to match React version structure
+  - Added bootstrap.ts initialization section
+  - Updated Vite plugin options documentation
+  - Improved setup instructions
+  - All examples now use `useLocalizer`
+
+### 🐛 Bug Fixes
+
+- Fixed translation initialization warnings
+- Improved error messages for missing translations
+
+---
+
 ## v0.0.1 - 2025-11-09
 
 ### 🎉 Initial Beta Release

README.md

@@ -1,12 +1,13 @@
 # @devwizard/laravel-localizer-vue
 
-🌍 Vue 3 integration for Laravel Localizer with Vite plugin, `useTranslation` composable, and automatic TypeScript generation.
+🌍 Vue 3 integration for Laravel Localizer with Vite plugin, `useLocalizer` composable, and automatic TypeScript generation.
 
 ## Features
 
 - ✅ **Automatic Generation**: Vite plugin watches for language file changes and regenerates TypeScript files
 - ✅ **Type-Safe**: Full TypeScript support with auto-generated types
-- ✅ **Vue 3 Composition API**: Intuitive `useTranslation` composable for Vue components
+- ✅ **Vue 3 Composition API**: Intuitive `useLocalizer` composable for Vue components
+- ✅ **Customizable Path**: By default reads from `@/lang` folder, customizable via options
 - ✅ **Laravel-Compatible**: Matches Laravel's translation API (`__`, `trans`, `choice`)
 - ✅ **Inertia.js Integration**: Seamlessly works with Inertia.js page props
 - ✅ **RTL Support**: Built-in right-to-left language support
@@ -26,12 +27,42 @@ yarn add @devwizard/laravel-localizer-vue
 
 ```bash
 composer require devwizardhq/laravel-localizer
-php artisan localizer:install --framework=vue
+php artisan localizer:install
 ```
 
+The install command will:
+- ✅ Publish configuration files
+- ✅ Create default locale files
+- ✅ Install npm package (optional)
+- ✅ Generate initial TypeScript files
+
+**Note:** You'll need to manually add the bootstrap setup (see step 1 below).
+
 ## Setup
 
-### 1. Add Vite Plugin
+### 1. Initialize Translations in Bootstrap
+
+Add this to your `resources/js/bootstrap.ts`:
+
+```typescript
+import { translations } from '@/lang';
+
+declare global {
+  interface Window {
+    localizer?: {
+      translations: Record<string, Record<string, string>>;
+    };
+  }
+}
+
+window.localizer = {
+  translations,
+};
+```
+
+This makes translations available globally and synchronously.
+
+### 2. Add Vite Plugin
 
 Update your `vite.config.ts`:
 
@@ -47,10 +78,15 @@ export default defineConfig({
       debug: true, // Enable debug logging (optional)
     }),
   ],
+  resolve: {
+    alias: {
+      '@': '/resources/js',
+    },
+  },
 });
 ```
 
-### 2. Generate Translation Files
+### 3. Generate Translation Files
 
 ```bash
 php artisan localizer:generate --all
@@ -64,9 +100,9 @@ This creates TypeScript files in `resources/js/lang/` directory.
 
 ```vue
 <script setup lang="ts">
-import { useTranslation } from '@devwizard/laravel-localizer-vue';
+import { useLocalizer } from '@devwizard/laravel-localizer-vue';
 
-const { __ } = useTranslation();
+const { __ } = useLocalizer();
 </script>
 
 <template>
@@ -81,9 +117,9 @@ const { __ } = useTranslation();
 
 ```vue
 <script setup lang="ts">
-import { useTranslation } from '@devwizard/laravel-localizer-vue';
+import { useLocalizer } from '@devwizard/laravel-localizer-vue';
 
-const { __ } = useTranslation();
+const { __ } = useLocalizer();
 const userName = 'John';
 </script>
 
@@ -99,9 +135,9 @@ const userName = 'John';
 
 ```vue
 <script setup lang="ts">
-import { useTranslation } from '@devwizard/laravel-localizer-vue';
+import { useLocalizer } from '@devwizard/laravel-localizer-vue';
 
-const { choice } = useTranslation();
+const { choice } = useLocalizer();
 const itemCount = ref(5);
 </script>
 
@@ -114,9 +150,9 @@ const itemCount = ref(5);
 
 ```vue
 <script setup lang="ts">
-import { useTranslation } from '@devwizard/laravel-localizer-vue';
+import { useLocalizer } from '@devwizard/laravel-localizer-vue';
 
-const { dir, locale } = useTranslation();
+const { dir, locale } = useLocalizer();
 </script>
 
 <template>
@@ -130,9 +166,9 @@ const { dir, locale } = useTranslation();
 
 ```vue
 <script setup lang="ts">
-import { useTranslation } from '@devwizard/laravel-localizer-vue';
+import { useLocalizer } from '@devwizard/laravel-localizer-vue';
 
-const { __, has } = useTranslation();
+const { __, has } = useLocalizer();
 </script>
 
 <template>
@@ -146,9 +182,9 @@ const { __, has } = useTranslation();
 
 ```vue
 <script setup lang="ts">
-import { useTranslation } from '@devwizard/laravel-localizer-vue';
+import { useLocalizer } from '@devwizard/laravel-localizer-vue';
 
-const { translations, locale } = useTranslation();
+const { translations, locale } = useLocalizer();
 
 // translations and locale are reactive ComputedRefs
 // They automatically update when the locale changes
@@ -164,7 +200,7 @@ const { translations, locale } = useTranslation();
 
 ## API Reference
 
-### `useTranslation()`
+### `useLocalizer()`
 
 Returns an object with the following properties and methods:
 
@@ -185,17 +221,14 @@ Returns an object with the following properties and methods:
 
 ```typescript
 laravelLocalizer({
+  // Watch patterns for language file changes (relative to project root)
+  patterns: ['lang/**', 'resources/lang/**'],
+
   // Command to run when lang files change
   command: 'php artisan localizer:generate --all',
 
-  // Watch paths for changes
-  watch: ['lang/**', 'resources/lang/**'],
-
   // Enable debug logging
   debug: false,
-
-  // Debounce delay in milliseconds
-  debounce: 300,
 });
 ```