[{"data":1,"prerenderedAt":71},["ShallowReactive",2],{"eKsg9kva3B":3,"YBwVQjNS6N":11,"lkHFIcb3Ll":22},{"data":4},{"id":5,"title":6,"slug":7,"slugs":8,"thumbnail":9,"thumbnail_small":10},3,"Laravel","laravel",{"en":7,"fr":7},"https://app.tomjamon.com/storage/12/conversions/01JER9785TAJYWQRE60EHP67C4-cover.webp","https://app.tomjamon.com/storage/12/conversions/01JER9785TAJYWQRE60EHP67C4-card.webp",{"data":12},[13,15],{"id":5,"title":6,"slug":7,"slugs":14,"thumbnail":9,"thumbnail_small":10},{"en":7,"fr":7},{"id":16,"title":17,"slug":18,"slugs":19,"thumbnail":20,"thumbnail_small":21},6,"Nuxt JS","nuxt-js",{"en":18,"fr":18},"https://app.tomjamon.com/storage/10/conversions/01JER91M3YJXF7EHZR75J054MT-cover.webp","https://app.tomjamon.com/storage/10/conversions/01JER91M3YJXF7EHZR75J054MT-card.webp",{"data":23,"links":55,"meta":58},[24,38],{"id":5,"title":25,"slug":26,"slugs":27,"summary":29,"content":30,"categories":31,"thumbnail":34,"thumbnail_small":35,"created_at":36,"updated_at":37},"Laravel 11 : envoyer ses emails avec Brevo API sans SMTP","envoyer-emails-laravel-11-brevo-api-sans-smtp",{"en":28,"fr":26},"laravel-11-send-emails-with-brevo-api-without-smtp","Découvrez comment intégrer Brevo à Laravel 11 via son API transactionnelle pour envoyer vos emails sans configuration SMTP tout en conservant les Mailables et Notifications Laravel.","Lorsque l'on utilise Laravel, la méthode la plus courante pour envoyer des emails via Brevo consiste à configurer un serveur SMTP. Cependant, Brevo propose également une API transactionnelle qui offre plusieurs avantages :\n\n- Pas de gestion SMTP\n- Meilleure fiabilité\n- Temps d'envoi réduits\n- Gestion native des templates Brevo\n- Suivi des événements (ouvertures, clics, bounces, etc.)\n\nDans cet article, nous allons voir comment intégrer Brevo comme transport d'emails dans Laravel 11 en utilisant l'API officielle.\n\n## Installation des dépendances\n\nCommencez par installer le transport Brevo pour Symfony Mailer ainsi que le client HTTP requis :\n\n```bash\ncomposer require symfony/brevo-mailer\ncomposer require symfony/http-client\n```\n\n## Création de la clé API Brevo\n\nDepuis votre interface Brevo :\n\n1. Rendez-vous dans **SMTP & API**\n2. Ouvrez l'onglet **API Keys**\n3. Créez une nouvelle clé API transactionnelle\n\nVous obtiendrez une clé ressemblant à :\n\n```text\nxkeysib-xxxxxxxxxxxxxxxxxxxxxxxx\n```\n\n## Configuration Laravel\n\nAjoutez votre clé API dans le fichier `.env` :\n\n```env\nMAIL_MAILER=brevo\n\nBREVO_API_KEY=xkeysib-xxxxxxxxxxxxxxxxxxxxxxxx\n\nMAIL_FROM_ADDRESS=noreply@votredomaine.fr\nMAIL_FROM_NAME=\"${APP_NAME}\"\n```\n\nPuis dans `config/services.php` :\n\n```php\nreturn [\n\n    // ...\n\n    'brevo' => [\n        'key' => env('BREVO_API_KEY'),\n    ],\n\n];\n```\n\n## Déclaration du transport Brevo\n\nAjoutez un nouveau mailer dans `config/mail.php` :\n\n```php\n'brevo' => [\n    'transport' => 'brevo',\n],\n```\n\nLaravel ne connaît pas nativement le transport Brevo. Il faut donc l'enregistrer dans un Service Provider.\n\nDans `AppServiceProvider.php` :\n\n```php\nuse Illuminate\\Support\\Facades\\Mail;\nuse Symfony\\Component\\Mailer\\Bridge\\Brevo\\Transport\\BrevoTransportFactory;\nuse Symfony\\Component\\Mailer\\Transport\\Dsn;\n\npublic function boot(): void\n{\n    Mail::extend('brevo', function () {\n        return (new BrevoTransportFactory())->create(\n            new Dsn(\n                'brevo+api',\n                'default',\n                config('services.brevo.key')\n            )\n        );\n    });\n}\n```\n\n## Nettoyage du cache Laravel\n\nAprès modification de la configuration :\n\n```bash\nphp artisan optimize:clear\n```\n\n## Test d'envoi\n\nVous pouvez maintenant envoyer un email normalement :\n\n```php\nuse Illuminate\\Support\\Facades\\Mail;\n\nMail::raw('Test Brevo API', function ($message) {\n    $message->to('contact@example.com')\n        ->subject('Test Brevo');\n});\n```\n\nOu via une Mailable :\n\n```php\nMail::to($user)->send(new WelcomeMail());\n```\n\nAucune modification supplémentaire n'est nécessaire dans votre code métier.\n\n## Erreurs courantes\n\n### Unsupported mail transport [brevo]\n\nLe transport n'a pas été enregistré dans le `AppServiceProvider` ou le package `symfony/brevo-mailer` n'est pas installé.\n\n### User is not set\n\nLe constructeur `Dsn` est mal configuré. La clé API doit être passée comme troisième argument.\n\n### You cannot use AbstractHttpTransport as the HttpClient component is not installed\n\nLe package suivant est manquant :\n\n```bash\ncomposer require symfony/http-client\n```\n\n## Conclusion\n\nL'utilisation de Brevo via API permet de conserver toute la puissance du système de mails Laravel tout en bénéficiant des performances et fonctionnalités de l'API transactionnelle Brevo.\n\nUne fois la configuration terminée, vos Mailables, notifications et files d'attente continuent de fonctionner exactement comme avec SMTP, sans modification du code applicatif.",[32],{"id":5,"title":6,"slug":7,"slugs":33,"thumbnail":9,"thumbnail_small":10},{"en":7,"fr":7},"https://app.tomjamon.com/storage/15/conversions/01KT6BXVWDYSYYM25N3QKAPH7C-cover.webp","https://app.tomjamon.com/storage/15/conversions/01KT6BXVWDYSYYM25N3QKAPH7C-card.webp","2026-06-03T09:02:47.000000Z","2026-06-03T09:27:15.000000Z",{"id":39,"title":40,"slug":41,"slugs":42,"summary":44,"content":45,"categories":46,"thumbnail":51,"thumbnail_small":52,"created_at":53,"updated_at":54},2,"Mise en place de l'internationalisation (i18n) dans un projet Nuxt 3","mise-en-place-de-internationalisation-i18n-dans-un-projet-nuxt-3",{"en":43,"fr":41},"internationalization-i18n-with-nuxt-3-a-step-by-step-guide","Apprenez à intégrer facilement l’internationalisation (i18n) dans votre projet Nuxt 3 grâce au module @nuxtjs/i18n. Ce guide détaille les étapes pour configurer plusieurs langues, gérer des routes personnalisées et optimiser l’expérience utilisateur multilingue.","L'internationalisation (i18n) est essentielle pour les applications web visant une audience multilingue. Nuxt 3, avec ses fonctionnalités avancées, rend l'intégration d'i18n simple et efficace. Cet article vous guide à travers la mise en place d'i18n dans un projet Nuxt 3, en utilisant des configurations spécifiques et des fichiers de routes et de langues.\n\n## Prérequis\n\nVous pouvez installer Nuxt 3 et le module i18n en utilisant npm :\n\n```bash\nnpm install nuxt@latest @nuxtjs/i18n\n```\n\n## Configuration de base\n\nNous allons configurer notre projet Nuxt 3 pour supporter plusieurs langues en modifiant le fichier `nuxt.config.ts`. Voici comment configurer le module i18n :\n\n### Étape 1 : Importer les routes\n\nCréez un fichier `routes.json` à la racine de votre projet. Ce fichier contiendra les définitions de vos routes spécifiques à chaque langue. Voici un exemple de fichier `routes.json` :\n\n```json\n{\n    \"about\": {\n        \"en\": \"/about\",\n        \"fr\": \"/a-propos\",\n        \"es\": \"/acerca-de\"\n    },\n    \"contact\": {\n        \"en\": \"/contact\",\n        \"fr\": \"/contact\",\n        \"es\": \"/contacto\"\n    }\n}\n```\n\n### Étape 2 : Modifier `nuxt.config.ts`\n\nModifiez votre fichier `nuxt.config.ts` pour inclure la configuration i18n. Voici un exemple de configuration :\n\n```tsx\nimport routes from './routes.json'\n\nexport default defineNuxtConfig({\n  modules: [\n    '@nuxtjs/i18n',\n  ],\n  i18n: {\n    locales: [\n      { code: 'en', label: 'English', iso: 'en-US', file: 'en.json' },\n      { code: 'fr', label: 'Français', iso: 'fr-FR', file: 'fr.json' },\n      { code: 'es', label: 'Español', iso: 'es-ES', file: 'es.json' },\n    ],\n    defaultLocale: 'fr',\n    strategy: 'prefix_except_default',\n    detectBrowserLanguage: {\n      useCookie: true,\n      cookieKey: 'i18n_redirected_' + process.env.NODE_ENV,\n      alwaysRedirect: true,\n      fallbackLocale: 'fr',\n    },\n    langDir: 'lang/',\n    lazy: true,\n    pages: routes,\n    customRoutes: 'config',\n  }\n})\n```\n\n### Explications des configurations\n\n- `locales` : Définit les langues supportées par votre application.\n- `defaultLocale` : Définit la langue par défaut.\n- `strategy` : Utilise `prefix_except_default` pour préfixer les routes avec les codes de langue, sauf pour la langue par défaut.\n- `detectBrowserLanguage` : Configue la détection de la langue du navigateur et l'utilisation des cookies pour stocker les préférences de langue.\n- `langDir` : Spécifie le répertoire où sont stockés les fichiers de langue.\n- `lazy` : Active le chargement paresseux des fichiers de langue.\n- `pages` : Utilise les routes définies dans `routes.json`.\n- `customRoutes` : Permet de configurer des routes personnalisées.\n\n## Création des fichiers de langue\n\nPour chaque langue, créez un fichier JSON dans le répertoire `lang/`. Par exemple, pour le français, créez `lang/fr.json` :\n\n```json\n{\n  \"welcome\": \"Bienvenue\",\n  \"about\": \"À propos de nous\",\n  \"contact\": \"Contactez-nous\"\n}\n\n```\n\nFaites de même pour `en.json` et `es.json` en traduisant les clés dans les langues respectives.\n\n## Utilisation des traductions dans les composants\n\nPour utiliser les traductions dans vos composants, utilisez le composant `\u003Cnuxt-link>` et la méthode `$t`. Par exemple :\n\n```html\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>{{ $t('welcome') }}\u003C/h1>\n    \u003CNuxtLinkLocale to=\"about\">{{ $t('about') }}r\u003C/NuxtLinkLocale>\n  \u003C/div>\n\u003C/template>\n```\n\n## Détection de la langue du navigateur\n\nLa configuration `detectBrowserLanguage` permet de détecter automatiquement la langue du navigateur de l'utilisateur et de rediriger vers la version appropriée de votre site. Cette configuration utilise des cookies pour stocker la langue préférée de l'utilisateur, assurant ainsi une expérience utilisateur cohérente.\n\n## Gestion des routes personnalisées\n\nGrâce à la configuration `customRoutes`, vous pouvez définir des routes spécifiques pour chaque langue dans votre fichier `routes.json`. Cela permet une gestion plus flexible et granulaire des chemins de votre application.\n\n## Conclusion\n\nL'internationalisation est une étape essentielle pour rendre votre application accessible à une audience mondiale. Avec Nuxt 3 et le module `@nuxtjs/i18n`, la mise en place d'i18n devient simple et efficace. En suivant les étapes décrites dans cet article, vous pouvez configurer votre projet pour supporter plusieurs langues et offrir une expérience utilisateur fluide et locale.\n\nLa flexibilité de Nuxt 3 combinée aux puissantes fonctionnalités d'i18n vous permet de gérer facilement les traductions, les détections de langue et les redirections. Maintenant, vous êtes prêt à rendre votre application Nuxt 3 multilingue et à atteindre un public plus large.\n\nN'hésitez pas à consulter la documentation officielle de Nuxt i18n pour plus de détails et de configurations avancées. Bon codage !",[47,49],{"id":16,"title":17,"slug":18,"slugs":48,"thumbnail":20,"thumbnail_small":21},{"en":18,"fr":18},{"id":5,"title":6,"slug":7,"slugs":50,"thumbnail":9,"thumbnail_small":10},{"en":7,"fr":7},"https://app.tomjamon.com/storage/6/conversions/01JENYFEHS5X3VQQ75A54QCS25-cover.webp","https://app.tomjamon.com/storage/6/conversions/01JENYFEHS5X3VQQ75A54QCS25-card.webp","2024-12-09T14:51:50.000000Z","2024-12-11T15:27:38.000000Z",{"first":56,"last":56,"prev":57,"next":57},"https://app.tomjamon.com/api/posts?page=1",null,{"current_page":59,"from":59,"last_page":59,"links":60,"path":69,"per_page":70,"to":39,"total":39},1,[61,64,67],{"url":57,"label":62,"page":57,"active":63},"« Previous",false,{"url":56,"label":65,"page":59,"active":66},"1",true,{"url":57,"label":68,"page":57,"active":63},"Next »","https://app.tomjamon.com/api/posts",9,1792846768109]