@yassidev/nuxt-directus 0.0.10 → 0.0.12

package/README.fr.md

@@ -0,0 +1,501 @@
+# @yassidev/nuxt-directus
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+Un module Nuxt pour une meilleure intégration avec Directus CMS, offrant une gestion avancée de l'i18n, des composables TypeScript, des types générés automatiquement et bien plus encore.
+
+- [✨  Release Notes](/CHANGELOG.md)
+
+## ✨ Fonctionnalités
+
+- 🔧 **Composables pré-configurés** : Accès facile à l'API Directus (REST/GraphQL)
+- 🌍 **Intégration i18n** : Synchronisation bidirectionnelle avec @nuxtjs/i18n
+- 📝 **Types TypeScript** : Génération automatique des types Directus
+- 🖼️ **Intégration @nuxt/image** : Support optimisé pour les assets Directus
+- 🔄 **Proxy transparent** : Contournement des problèmes CORS
+- ⚡ **Configuration simplifiée** : Variables d'environnement et configuration par défaut
+- 🔥 **Mode développement avancé** : Synchronisation en temps réel des traductions
+
+## 📦 Installation
+
+```bash
+# npm
+npm install @yassidev/nuxt-directus
+
+# yarn
+yarn add @yassidev/nuxt-directus
+
+# pnpm
+pnpm install @yassidev/nuxt-directus
+```
+
+## ⚙️ Configuration
+
+### Configuration de base
+
+Ajoutez le module à votre configuration Nuxt :
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@yassidev/nuxt-directus'],
+  
+  // Configuration optionnelle
+  directus: {
+    url: 'https://votre-instance.directus.app',
+    accessToken: 'votre-token-dacces',
+  },
+})
+```
+
+### Variables d'environnement
+
+Vous pouvez également utiliser les variables d'environnement :
+
+```bash
+# .env
+DIRECTUS_URL=https://votre-instance.directus.app
+DIRECTUS_ACCESS_TOKEN=votre-token-dacces
+```
+
+### Configuration complète
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@yassidev/nuxt-directus'],
+  
+  directus: {
+    // URL de votre instance Directus
+    url: 'https://votre-instance.directus.app',
+    
+    // Token d'accès Directus
+    accessToken: 'votre-token-dacces',
+    
+    // Configuration des composables
+    composables: {
+      enabled: true,        // Active les composables
+      mode: 'rest',        // 'rest' ou 'graphql'
+      client: true,        // Disponible côté client
+      server: true,        // Disponible côté serveur
+    },
+    
+    // Configuration i18n
+    i18n: {
+      enabled: true,       // Active l'intégration i18n
+      sync: true,         // Synchronisation bidirectionnelle
+      prefix: 'app.',     // Préfixe pour les clés de traduction
+    },
+    
+    // Génération des types TypeScript
+    types: {
+      enabled: true,       // Génère les types automatiquement
+    },
+    
+    // Configuration du proxy
+    proxy: {
+      enabled: true,       // Active le proxy
+      path: '/api',       // Chemin du proxy
+      options: {},        // Options h3 ProxyOptions
+    },
+    
+    // Intégration avec @nuxt/image
+    image: {
+      enabled: true,       // Active l'intégration image
+      alias: 'directus',  // Alias pour les images
+    },
+  },
+})
+```
+
+## 🚀 Utilisation
+
+### Composables Directus
+
+Le module fournit un composable `useDirectus()` configuré automatiquement :
+
+```vue
+<script setup>
+// Mode REST (par défaut)
+const directus = useDirectus()
+
+// Récupérer des données
+const { data: articles } = await directus.request(readItems('articles'))
+
+// Créer un nouvel élément
+await directus.request(createItem('articles', {
+  title: 'Mon article',
+  content: 'Contenu de l\'article'
+}))
+</script>
+```
+
+#### Mode GraphQL
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  directus: {
+    composables: {
+      mode: 'graphql'
+    }
+  }
+})
+```
+
+```vue
+<script setup>
+const directus = useDirectus()
+
+// Requête GraphQL
+const result = await directus.query(`
+  query {
+    articles {
+      id
+      title
+      content
+    }
+  }
+`)
+</script>
+```
+
+### Types TypeScript
+
+Le module génère automatiquement les types TypeScript de votre schéma Directus :
+
+```typescript
+// Toutes les collections sont disponibles dans #directus/types
+import type { Schema } from '#directus/types'
+
+// Utilisation dans votre code - les types sont automatiquement détectés
+const directus = useDirectus()
+const articles = await directus.request(readItems('articles')) // Le type est automatiquement inféré
+```
+
+### Intégration i18n
+
+#### Configuration préalable
+
+Installez et configurez `@nuxtjs/i18n` :
+
+```bash
+npm install @nuxtjs/i18n
+```
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/i18n', '@yassidev/nuxt-directus'],
+  
+  i18n: {
+    locales: [
+      { code: 'fr', name: 'Français' },
+      { code: 'en', name: 'English' }
+    ],
+    defaultLocale: 'fr'
+  }
+})
+```
+
+#### Synchronisation automatique
+
+Les traductions sont automatiquement synchronisées entre Directus et votre application Nuxt :
+
+```vue
+<template>
+  <div>
+    <!-- Les traductions sont chargées depuis Directus -->
+    <h1>{{ $t('welcome.title') }}</h1>
+    <p>{{ $t('welcome.description') }}</p>
+  </div>
+</template>
+```
+
+#### Gestion des traductions avec préfixe
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  directus: {
+    i18n: {
+      prefix: 'frontend.' // Seules les clés commençant par 'frontend.' seront synchronisées
+    }
+  }
+})
+```
+
+#### Synchronisation en temps réel (développement)
+
+En mode développement, les modifications des fichiers de traduction sont automatiquement synchronisées avec Directus :
+
+1. Modifiez un fichier de traduction local
+2. Les changements sont automatiquement envoyés à Directus
+3. Les autres développeurs voient les mises à jour en temps réel
+
+### Intégration avec @nuxt/image
+
+Le module configure automatiquement `@nuxt/image` avec un alias pour les assets Directus :
+
+```vue
+<template>
+  <div>
+    <!-- Utilisation directe avec l'alias configuré -->
+    <NuxtImg 
+      src="directus/votre-asset-id" 
+      width="400" 
+      height="300" 
+    />
+    
+    <!-- Avec transformations Directus -->
+    <NuxtImg 
+      src="directus/votre-asset-id?fit=cover&width=800&height=600" 
+      width="400" 
+      height="300" 
+    />
+  </div>
+</template>
+```
+
+### Proxy API
+
+Le proxy permet d'éviter les problèmes CORS en développement :
+
+```typescript
+// Au lieu de https://votre-directus.com/items/articles
+// Utilisez /api/items/articles
+
+const { data } = await $fetch('/api/items/articles')
+```
+
+## 🛠️ Développement
+
+### Configuration du projet de développement
+
+```bash
+# Cloner le repository
+git clone https://github.com/yassilah/nuxt-directus.git
+
+# Installer les dépendances
+pnpm install
+
+# Configurer l'environnement
+cp .env.example .env
+# Éditer .env avec vos paramètres Directus
+
+# Lancer le playground
+pnpm dev
+```
+
+### Scripts disponibles
+
+```bash
+# Développement
+pnpm dev
+
+# Build
+pnpm build
+
+# Tests
+pnpm test
+pnpm test:watch
+
+# Linting
+pnpm lint
+
+# Release
+pnpm release
+```
+
+## 📚 Exemples avancés
+
+### Récupération de données avec relations
+
+```vue
+<script setup>
+const directus = useDirectus()
+
+const { data: articles } = await directus.request(readItems('articles', {
+  fields: [
+    'id',
+    'title', 
+    'content',
+    'author.first_name',
+    'author.last_name',
+    'category.name'
+  ],
+  filter: {
+    status: { _eq: 'published' }
+  },
+  sort: ['-date_created'],
+  limit: 10
+}))
+</script>
+```
+
+### Upload de fichiers
+
+```vue
+<script setup>
+const directus = useDirectus()
+
+async function uploadFile(file: File) {
+  const formData = new FormData()
+  formData.append('file', file)
+  
+  const result = await directus.request(uploadFiles(formData))
+  return result
+}
+</script>
+```
+
+### Authentification utilisateur
+
+```vue
+<script setup>
+const directus = useDirectus()
+
+async function login(email: string, password: string) {
+  try {
+    const result = await directus.request(login(email, password))
+    // Gérer la connexion réussie
+    return result
+  } catch (error) {
+    // Gérer l'erreur de connexion
+    console.error('Erreur de connexion:', error)
+  }
+}
+</script>
+```
+
+## 🔧 Configuration avancée
+
+### Désactiver des fonctionnalités
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  directus: {
+    // Désactiver l'i18n
+    i18n: false,
+    
+    // Désactiver les types
+    types: false,
+    
+    // Désactiver le proxy
+    proxy: false,
+    
+    // Désactiver les composables
+    composables: false,
+    
+    // Désactiver l'intégration image
+    image: false,
+  }
+})
+```
+
+### Configuration personnalisée du proxy
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  directus: {
+    proxy: {
+      enabled: true,
+      path: '/directus-api',
+      options: {
+        headers: {
+          'Custom-Header': 'valeur'
+        },
+        timeout: 30000
+      }
+    }
+  }
+})
+```
+
+## ⚠️ Prérequis
+
+- Nuxt 3.x
+- Node.js 18+
+- Une instance Directus 10+
+
+### Modules optionnels
+
+- `@nuxtjs/i18n` : Pour les fonctionnalités d'internationalisation
+- `@nuxt/image` : Pour l'optimisation des images
+
+## 🤝 Contribution
+
+<details>
+  <summary>Développement local</summary>
+  
+  ```bash
+  # Installer les dépendances
+  pnpm install
+  
+  # Générer les type stubs
+  pnpm dev:prepare
+  
+  # Développer avec le playground
+  pnpm dev
+  
+  # Build le playground
+  pnpm dev:build
+  
+  # Lancer ESLint
+  pnpm lint
+  
+  # Lancer Vitest
+  pnpm test
+  pnpm test:watch
+  
+  # Release une nouvelle version
+  pnpm release
+  ```
+
+</details>
+
+### Étapes pour contribuer
+
+1. Forkez le projet
+2. Créez votre branche de fonctionnalité (`git checkout -b feature/AmazingFeature`)
+3. Commitez vos changements (`git commit -m 'Add some AmazingFeature'`)
+4. Poussez vers la branche (`git push origin feature/AmazingFeature`)
+5. Ouvrez une Pull Request
+
+## 📄 Licence
+
+Ce projet est sous licence [MIT](LICENSE).
+
+## 🙏 Remerciements
+
+- L'équipe [Directus](https://directus.io) pour leur fantastique CMS headless
+- L'équipe [Nuxt](https://nuxt.com) pour le framework
+- La communauté open source pour les retours et contributions
+
+## 📞 Support
+
+- 🐛 [Signaler un bug](https://github.com/yassilah/nuxt-directus/issues)
+- 💡 [Demander une fonctionnalité](https://github.com/yassilah/nuxt-directus/issues)
+- 💬 [Discussions](https://github.com/yassilah/nuxt-directus/discussions)
+
+---
+
+Fait avec ❤️ par [Yasser Lahbibi](https://github.com/yassilah)
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/@yassidev/nuxt-directus/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/@yassidev/nuxt-directus
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/@yassidev/nuxt-directus.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/@yassidev/nuxt-directus
+
+[license-src]: https://img.shields.io/npm/l/@yassidev/nuxt-directus.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://npmjs.com/package/@yassidev/nuxt-directus
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/README.md

@@ -1,84 +1,501 @@
-<!--
-Get your module up and running quickly.
-
-Find and replace all on all files (CMD+SHIFT+F):
-- Name: My Module
-- Package name: my-module
-- Description: My new Nuxt module
--->
-
-# My Module
+# @yassidev/nuxt-directus
 
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-My new Nuxt module for doing amazing things.
+A Nuxt module for better integration with Directus CMS, featuring advanced i18n management, TypeScript composables, auto-generated types, and much more.
 
 - [✨ &nbsp;Release Notes](/CHANGELOG.md)
-<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
-<!-- - [📖 &nbsp;Documentation](https://example.com) -->
 
-## Features
+## ✨ Features
+
+- 🔧 **Pre-configured Composables**: Easy access to Directus API (REST/GraphQL)
+- 🌍 **i18n Integration**: Bidirectional synchronization with @nuxtjs/i18n
+- 📝 **TypeScript Types**: Automatic generation of Directus types
+- 🖼️ **@nuxt/image Integration**: Optimized support for Directus assets
+- 🔄 **Transparent Proxy**: CORS issues bypass
+- ⚡ **Simplified Configuration**: Environment variables and default configuration
+- 🔥 **Advanced Development Mode**: Real-time translation synchronization
+
+## 📦 Installation
+
+```bash
+# npm
+npm install @yassidev/nuxt-directus
+
+# yarn
+yarn add @yassidev/nuxt-directus
+
+# pnpm
+pnpm install @yassidev/nuxt-directus
+```
+
+## ⚙️ Configuration
+
+### Basic Configuration
+
+Add the module to your Nuxt configuration:
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@yassidev/nuxt-directus'],
+  
+  // Optional configuration
+  directus: {
+    url: 'https://your-instance.directus.app',
+    accessToken: 'your-access-token',
+  },
+})
+```
+
+### Environment Variables
+
+You can also use environment variables:
+
+```bash
+# .env
+DIRECTUS_URL=https://your-instance.directus.app
+DIRECTUS_ACCESS_TOKEN=your-access-token
+```
+
+### Complete Configuration
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@yassidev/nuxt-directus'],
+  
+  directus: {
+    // URL of your Directus instance
+    url: 'https://your-instance.directus.app',
+    
+    // Directus access token
+    accessToken: 'your-access-token',
+    
+    // Composables configuration
+    composables: {
+      enabled: true,        // Enable composables
+      mode: 'rest',        // 'rest' or 'graphql'
+      client: true,        // Available on client-side
+      server: true,        // Available on server-side
+    },
+    
+    // i18n configuration
+    i18n: {
+      enabled: true,       // Enable i18n integration
+      sync: true,         // Bidirectional synchronization
+      prefix: 'app.',     // Prefix for translation keys
+    },
+    
+    // TypeScript types generation
+    types: {
+      enabled: true,       // Generate types automatically
+    },
+    
+    // Proxy configuration
+    proxy: {
+      enabled: true,       // Enable proxy
+      path: '/api',       // Proxy path
+      options: {},        // h3 ProxyOptions
+    },
+    
+    // @nuxt/image integration
+    image: {
+      enabled: true,       // Enable image integration
+      alias: 'directus',  // Alias for images
+    },
+  },
+})
+```
+
+## 🚀 Usage
+
+### Directus Composables
+
+The module provides a pre-configured `useDirectus()` composable:
+
+```vue
+<script setup>
+// REST mode (default)
+const directus = useDirectus()
+
+// Fetch data
+const { data: articles } = await directus.request(readItems('articles'))
+
+// Create a new item
+await directus.request(createItem('articles', {
+  title: 'My article',
+  content: 'Article content'
+}))
+</script>
+```
+
+#### GraphQL Mode
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  directus: {
+    composables: {
+      mode: 'graphql'
+    }
+  }
+})
+```
+
+```vue
+<script setup>
+const directus = useDirectus()
+
+// GraphQL query
+const result = await directus.query(`
+  query {
+    articles {
+      id
+      title
+      content
+    }
+  }
+`)
+</script>
+```
+
+### TypeScript Types
+
+The module automatically generates TypeScript types from your Directus schema:
+
+```typescript
+// All collections are available in #directus/types
+import type { Schema } from '#directus/types'
+
+// Usage in your code - types are automatically inferred
+const directus = useDirectus()
+const articles = await directus.request(readItems('articles')) // Type is automatically inferred
+```
+
+### i18n Integration
+
+#### Prerequisites
+
+Install and configure `@nuxtjs/i18n`:
+
+```bash
+npm install @nuxtjs/i18n
+```
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/i18n', '@yassidev/nuxt-directus'],
+  
+  i18n: {
+    locales: [
+      { code: 'fr', name: 'Français' },
+      { code: 'en', name: 'English' }
+    ],
+    defaultLocale: 'en'
+  }
+})
+```
+
+#### Automatic Synchronization
+
+Translations are automatically synchronized between Directus and your Nuxt application:
+
+```vue
+<template>
+  <div>
+    <!-- Translations are loaded from Directus -->
+    <h1>{{ $t('welcome.title') }}</h1>
+    <p>{{ $t('welcome.description') }}</p>
+  </div>
+</template>
+```
+
+#### Translation Management with Prefix
 
-<!-- Highlight some of the features your module provide here -->
-- ⛰ &nbsp;Foo
-- 🚠 &nbsp;Bar
-- 🌲 &nbsp;Baz
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  directus: {
+    i18n: {
+      prefix: 'frontend.' // Only keys starting with 'frontend.' will be synchronized
+    }
+  }
+})
+```
+
+#### Real-time Synchronization (Development)
+
+In development mode, local translation file changes are automatically synchronized with Directus:
+
+1. Modify a local translation file
+2. Changes are automatically sent to Directus
+3. Other developers see updates in real-time
+
+### @nuxt/image Integration
+
+The module automatically configures `@nuxt/image` with an alias for Directus assets. Please make sure to place `@yassidev/nuxt-directus` **before** `@nuxt/image` in your modules array.
+
+```vue
+<template>
+  <div>
+    <!-- Direct usage with the configured alias -->
+    <NuxtImg 
+      src="directus/your-asset-id" 
+      width="400" 
+      height="300" 
+    />
+    
+    <!-- With Directus transformations -->
+    <NuxtImg 
+      src="directus/your-asset-id?fit=cover&width=800&height=600" 
+      width="400" 
+      height="300" 
+    />
+  </div>
+</template>
+```
+
+### API Proxy
+
+The proxy allows bypassing CORS issues in development:
+
+```typescript
+// Instead of https://your-directus.com/items/articles
+// Use /api/items/articles
+
+const { data } = await $fetch('/api/items/articles')
+```
+
+## 🛠️ Development
 
-## Quick Setup
+### Development Project Setup
 
-Install the module to your Nuxt application with one command:
+```bash
+# Clone the repository
+git clone https://github.com/yassilah/nuxt-directus.git
+
+# Install dependencies
+pnpm install
+
+# Configure environment
+cp .env.example .env
+# Edit .env with your Directus settings
+
+# Start the playground
+pnpm dev
+```
+
+### Available Scripts
 
 ```bash
-npx nuxi module add my-module
+# Development
+pnpm dev
+
+# Build
+pnpm build
+
+# Tests
+pnpm test
+pnpm test:watch
+
+# Linting
+pnpm lint
+
+# Release
+pnpm release
+```
+
+## 📚 Advanced Examples
+
+### Data Fetching with Relations
+
+```vue
+<script setup>
+const directus = useDirectus()
+
+const { data: articles } = await directus.request(readItems('articles', {
+  fields: [
+    'id',
+    'title', 
+    'content',
+    'author.first_name',
+    'author.last_name',
+    'category.name'
+  ],
+  filter: {
+    status: { _eq: 'published' }
+  },
+  sort: ['-date_created'],
+  limit: 10
+}))
+</script>
+```
+
+### File Upload
+
+```vue
+<script setup>
+const directus = useDirectus()
+
+async function uploadFile(file: File) {
+  const formData = new FormData()
+  formData.append('file', file)
+  
+  const result = await directus.request(uploadFiles(formData))
+  return result
+}
+</script>
+```
+
+### User Authentication
+
+```vue
+<script setup>
+const directus = useDirectus()
+
+async function login(email: string, password: string) {
+  try {
+    const result = await directus.request(login(email, password))
+    // Handle successful login
+    return result
+  } catch (error) {
+    // Handle login error
+    console.error('Login error:', error)
+  }
+}
+</script>
+```
+
+## 🔧 Advanced Configuration
+
+### Disabling Features
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  directus: {
+    // Disable i18n
+    i18n: false,
+    
+    // Disable types
+    types: false,
+    
+    // Disable proxy
+    proxy: false,
+    
+    // Disable composables
+    composables: false,
+    
+    // Disable image integration
+    image: false,
+  }
+})
 ```
 
-That's it! You can now use My Module in your Nuxt app ✨
+### Custom Proxy Configuration
 
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  directus: {
+    proxy: {
+      enabled: true,
+      path: '/directus-api',
+      options: {
+        headers: {
+          'Custom-Header': 'value'
+        },
+        timeout: 30000
+      }
+    }
+  }
+})
+```
+
+## ⚠️ Requirements
+
+- Nuxt 3.x
+- Node.js 18+
+- Directus 10+ instance
+
+### Optional Modules
 
-## Contribution
+- `@nuxtjs/i18n`: For internationalization features
+- `@nuxt/image`: For image optimization
+
+## 🤝 Contributing
 
 <details>
   <summary>Local development</summary>
   
   ```bash
   # Install dependencies
-  npm install
+  pnpm install
   
   # Generate type stubs
-  npm run dev:prepare
+  pnpm dev:prepare
   
   # Develop with the playground
-  npm run dev
+  pnpm dev
   
   # Build the playground
-  npm run dev:build
+  pnpm dev:build
   
   # Run ESLint
-  npm run lint
+  pnpm lint
   
   # Run Vitest
-  npm run test
-  npm run test:watch
+  pnpm test
+  pnpm test:watch
   
   # Release new version
-  npm run release
+  pnpm release
   ```
 
 </details>
 
+### Steps to Contribute
+
+1. Fork the project
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## 📄 License
+
+This project is licensed under the [MIT](LICENSE) License.
+
+## 🙏 Acknowledgments
+
+- The [Directus](https://directus.io) team for their fantastic headless CMS
+- The [Nuxt](https://nuxt.com) team for the framework
+- The open source community for feedback and contributions
+
+## 📞 Support
+
+- 🐛 [Report a bug](https://github.com/yassilah/nuxt-directus/issues)
+- 💡 [Request a feature](https://github.com/yassilah/nuxt-directus/issues)
+- 💬 [Discussions](https://github.com/yassilah/nuxt-directus/discussions)
+
+---
+
+Made with ❤️ by [Yasser Lahbibi](https://github.com/yassilah)
 
 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-version-href]: https://npmjs.com/package/my-module
+[npm-version-src]: https://img.shields.io/npm/v/@yassidev/nuxt-directus/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/@yassidev/nuxt-directus
 
-[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-downloads-href]: https://npm.chart.dev/my-module
+[npm-downloads-src]: https://img.shields.io/npm/dm/@yassidev/nuxt-directus.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/@yassidev/nuxt-directus
 
-[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
-[license-href]: https://npmjs.com/package/my-module
+[license-src]: https://img.shields.io/npm/l/@yassidev/nuxt-directus.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://npmjs.com/package/@yassidev/nuxt-directus
 
-[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
-[nuxt-href]: https://nuxt.com
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "directus",
   "configKey": "directus",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,7 +1,7 @@
-import { defineNuxtModule, useLogger, updateRuntimeConfig, hasNuxtModule, createResolver, addImports, addServerImports, addTemplate, addTypeTemplate } from 'nuxt/kit';
+import { defineNuxtModule, useLogger, updateRuntimeConfig, hasNuxtModule, createResolver, addImportsDir, addImports, addServerImportsDir, addServerImports, addTemplate, addTypeTemplate } from 'nuxt/kit';
 import { generateDirectusTypes } from 'directus-sdk-typegen';
 import { fetchTranslations, syncTranslations } from '../dist/runtime/server.js';
-import { readFileSync } from 'node:fs';
+import { readFileSync, existsSync } from 'node:fs';
 import { NAME } from '../dist/runtime/constants.js';
 import { resolve, join, relative, sep } from 'node:path';
 import { unwatchFile, watchFile, watch as watch$1, stat as stat$2 } from 'fs';
@@ -1820,21 +1820,20 @@ function normalizeConfig(options) {
 }
 function setupComposables(config, nuxt, logger) {
   const { resolve } = createResolver(import.meta.url);
-  const path = resolve(`./runtime/composables/${config.composables.mode}`);
-  nuxt.options.alias = defu(nuxt.options.alias, {
-    "#directus": path
-  });
+  const path = resolve(`./runtime/composables`);
+  const name = config.composables.mode === "graphql" ? "useDirectusGraphql" : "useDirectusRest";
+  const mainImport = {
+    name,
+    as: "useDirectus",
+    from: join(path, "useDirectus")
+  };
   if (config.composables.client) {
-    addImports({
-      from: path,
-      name: "useDirectus"
-    });
+    addImportsDir(path);
+    addImports(mainImport);
   }
   if (config.composables.server) {
-    addServerImports({
-      from: path,
-      name: "useDirectus"
-    });
+    addServerImportsDir(path);
+    addServerImports(mainImport);
   }
   logger.info(`Composables have been registered (mode: ${config.composables.mode}).`);
 }
@@ -1850,21 +1849,21 @@ function setupI18n(config, nuxt, logger) {
     };
     const path = "directus/locales";
     const result = codes.map((code) => {
-      const { dst } = addTemplate({
+      const { filename } = addTemplate({
         write: true,
         filename: join(path, `${code}.json`),
         getContents: () => fetchTranslations(code, runtimeConfig).then((translations) => {
           return JSON.stringify(Object.fromEntries(translations.map((translation) => [translation.key, translation.value])), null, 2);
         })
       });
-      return { code, dst };
+      return { code, filename };
     });
     if (nuxt.options.dev && !nuxt.options._prepare) {
-      const watcher = chokidar.watch(resolve(nuxt.options.buildDir, path, "*.json"), { ignoreInitial: true });
+      const watcher = chokidar.watch(path, { cwd: nuxt.options.buildDir, ignoreInitial: true });
       watcher.on("change", async (filePath) => {
-        const code = result.find((i) => i.dst === filePath)?.code;
+        const code = result.find((i) => i.filename === filePath)?.code;
         if (!code) return;
-        const translations = JSON.parse(readFileSync(filePath, "utf-8"));
+        const translations = JSON.parse(readFileSync(resolve(nuxt.options.buildDir, filePath), "utf-8"));
         const done = await syncTranslations(code, translations, runtimeConfig);
         if (!done) return;
         logger.info(`Synced translations for locale: ${code}`);
@@ -1872,11 +1871,12 @@ function setupI18n(config, nuxt, logger) {
     }
   }
   nuxt.hook("i18n:registerModule", (register) => {
+    const isStubbing = existsSync(resolve("./runtime/lang/index.ts"));
     const locales = codes.map((code) => ({
       code,
-      file: resolve("./runtime/lang/index")
+      file: isStubbing ? "index.ts" : "index.js"
     }));
-    register({ langDir: "", locales });
+    register({ langDir: resolve("./runtime/lang"), locales });
     logger.success("Locales have been registered: " + codes.join(", "));
   });
 }

package/dist/runtime/composables/useDirectus.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Use directus (rest)
+ */
+export declare function useDirectusRest(): import("@directus/sdk").DirectusClient<Schema> & import("@directus/sdk").RestClient<Schema>;
+/**
+ * Use directus (rest)
+ */
+export declare function useDirectusGraphql(): import("@directus/sdk").DirectusClient<Schema> & import("@directus/sdk").GraphqlClient<Schema>;

package/dist/runtime/composables/useDirectus.js

@@ -0,0 +1,8 @@
+import { rest, graphql } from "@directus/sdk";
+import { createBaseDirectus } from "./../client.js";
+export function useDirectusRest() {
+  return createBaseDirectus().with(rest());
+}
+export function useDirectusGraphql() {
+  return createBaseDirectus().with(graphql());
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yassidev/nuxt-directus",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "A Nuxt module for better integration with Directus CMS.",
   "repository": "yassilah/nuxt-directus",
   "license": "MIT",
@@ -51,10 +51,13 @@
     "@nuxt/schema": "^4.1.3",
     "@nuxt/test-utils": "^3.19.2",
     "@nuxtjs/i18n": "^10.1.0",
+    "@playwright/test": "^1.56.0",
     "@types/node": "latest",
     "changelogen": "^0.6.2",
+    "directus": "^11.12.0",
     "eslint": "^9.37.0",
     "nuxt": "^4.1.3",
+    "playwright-core": "^1.56.0",
     "typescript": "~5.9.3",
     "vitest": "^3.2.4",
     "vue-tsc": "^3.1.0"

package/dist/runtime/composables/graphql.d.ts

@@ -1,4 +0,0 @@
-/**
- * Use directus (rest)
- */
-export declare function useDirectus(): import("@directus/sdk").DirectusClient<Schema> & import("@directus/sdk").GraphqlClient<Schema>;

package/dist/runtime/composables/graphql.js

@@ -1,5 +0,0 @@
-import { graphql } from "@directus/sdk";
-import { createBaseDirectus } from "./../client.js";
-export function useDirectus() {
-  return createBaseDirectus().with(graphql());
-}

package/dist/runtime/composables/rest.d.ts

@@ -1,4 +0,0 @@
-/**
- * Use directus (rest)
- */
-export declare function useDirectus(): import("@directus/sdk").DirectusClient<Schema> & import("@directus/sdk").RestClient<Schema>;

package/dist/runtime/composables/rest.js

@@ -1,5 +0,0 @@
-import { rest } from "@directus/sdk";
-import { createBaseDirectus } from "./../client.js";
-export function useDirectus() {
-  return createBaseDirectus().with(rest());
-}