[{"data":1,"prerenderedAt":71},["ShallowReactive",2],{"YBwVQjNS6N":3,"eKsg9kva3B":19,"lkHFIcb3Ll":22},{"data":4},[5,12],{"id":6,"title":7,"slug":8,"slugs":9,"thumbnail":10,"thumbnail_small":11},3,"Laravel","laravel",{"en":8,"fr":8},"https://app.tomjamon.com/storage/12/conversions/01JER9785TAJYWQRE60EHP67C4-cover.webp","https://app.tomjamon.com/storage/12/conversions/01JER9785TAJYWQRE60EHP67C4-card.webp",{"id":13,"title":14,"slug":15,"slugs":16,"thumbnail":17,"thumbnail_small":18},6,"Nuxt JS","nuxt-js",{"en":15,"fr":15},"https://app.tomjamon.com/storage/10/conversions/01JER91M3YJXF7EHZR75J054MT-cover.webp","https://app.tomjamon.com/storage/10/conversions/01JER91M3YJXF7EHZR75J054MT-card.webp",{"data":20},{"id":6,"title":7,"slug":8,"slugs":21,"thumbnail":10,"thumbnail_small":11},{"en":8,"fr":8},{"data":23,"links":55,"meta":58},[24,38],{"id":6,"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: Send Emails with the Brevo API Without SMTP","laravel-11-send-emails-with-brevo-api-without-smtp",{"en":26,"fr":28},"envoyer-emails-laravel-11-brevo-api-sans-smtp","Learn how to integrate the Brevo API into Laravel 11 to send transactional emails without SMTP while keeping full compatibility with Laravel Mailables and Notifications.","When working with Laravel, the most common way to send emails through Brevo is by configuring an SMTP server. However, Brevo also provides a transactional API that offers several advantages:\n\n- No SMTP configuration required\n- Improved reliability\n- Faster email delivery\n- Native support for Brevo templates\n- Event tracking (opens, clicks, bounces, etc.)\n\nIn this article, we'll see how to integrate Brevo as a mail transport in Laravel 11 using its API.\n\n## Installing the Required Packages\n\nStart by installing the Symfony Brevo mailer transport and the required HTTP client:\n\n```bash\ncomposer require symfony/brevo-mailer\ncomposer require symfony/http-client\n```\n\n## Creating a Brevo API Key\n\nFrom your Brevo dashboard:\n\n1. Navigate to **SMTP & API**\n2. Open the **API Keys** tab\n3. Create a new transactional API key\n\nYou should receive a key similar to:\n\n```text\nxkeysib-xxxxxxxxxxxxxxxxxxxxxxxx\n```\n\n## Laravel Configuration\n\nAdd your API key to your `.env` file:\n\n```env\nMAIL_MAILER=brevo\n\nBREVO_API_KEY=xkeysib-xxxxxxxxxxxxxxxxxxxxxxxx\n\nMAIL_FROM_ADDRESS=noreply@yourdomain.com\nMAIL_FROM_NAME=\"${APP_NAME}\"\n```\n\nThen update `config/services.php`:\n\n```php\nreturn [\n\n    // ...\n\n    'brevo' => [\n        'key' => env('BREVO_API_KEY'),\n    ],\n\n];\n```\n\n## Registering the Brevo Mail Transport\n\nAdd a new mailer to `config/mail.php`:\n\n```php\n'brevo' => [\n    'transport' => 'brevo',\n],\n```\n\nLaravel does not natively recognize the Brevo transport, so it must be registered manually.\n\nIn `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## Clearing Laravel Cache\n\nAfter updating the configuration, clear Laravel's cache:\n\n```bash\nphp artisan optimize:clear\n```\n\n## Sending a Test Email\n\nYou can now send emails as usual:\n\n```php\nuse Illuminate\\Support\\Facades\\Mail;\n\nMail::raw('Brevo API test', function ($message) {\n    $message->to('contact@example.com')\n        ->subject('Brevo Test');\n});\n```\n\nOr with a Mailable:\n\n```php\nMail::to($user)->send(new WelcomeMail());\n```\n\nNo additional changes are required in your application code.\n\n## Common Errors\n\n### Unsupported mail transport [brevo]\n\nThe transport has not been registered correctly in `AppServiceProvider`, or the `symfony/brevo-mailer` package is missing.\n\n### User is not set\n\nThe `Dsn` constructor is misconfigured. The API key must be passed as the third argument.\n\n### You cannot use AbstractHttpTransport as the HttpClient component is not installed\n\nThe following package is missing:\n\n```bash\ncomposer require symfony/http-client\n```\n\n## Conclusion\n\nUsing Brevo through its API allows you to keep the full Laravel mail ecosystem while benefiting from the performance and features of Brevo's transactional email platform.\n\nOnce configured, your Mailables, Notifications, and queued emails continue to work exactly as they would with SMTP, without requiring any changes to your business logic.",[32],{"id":6,"title":7,"slug":8,"slugs":33,"thumbnail":10,"thumbnail_small":11},{"en":8,"fr":8},"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,"Internationalization (i18n) with Nuxt 3: A Step-by-Step Guide","internationalization-i18n-with-nuxt-3-a-step-by-step-guide",{"en":41,"fr":43},"mise-en-place-de-internationalisation-i18n-dans-un-projet-nuxt-3","Learn how to easily implement internationalization (i18n) in your Nuxt 3 project using the @nuxtjs/i18n module. This guide covers setting up multiple languages, managing custom routes, and optimizing the multilingual user experience.","Internationalization (i18n) is essential for web applications targeting a multilingual audience. Nuxt 3, with its advanced features, makes integrating i18n simple and effective. This article guides you through setting up i18n in a Nuxt 3 project using specific configurations and route and language files.\n\n## Prerequisites\n\nInstall Nuxt 3 and the i18n module using npm:\n\n```bash\nnpm install nuxt@latest @nuxtjs/i18n\n```\n\n## Basic Configuration\n\nWe will configure our Nuxt 3 project to support multiple languages by editing the nuxt.config.ts file. Here’s how to set up the i18n module:\n\n### Step 1: Import Routes\n\nCreate a `routes.json` file at the root of your project. This file will define your routes for each language. Example:\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### Step 2: Update nuxt.config.ts\n\nEdit your `nuxt.config.ts` file to include i18n configurations. Example:\n\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### Configuration Explanation\n\n- `locales`: Defines the supported languages.\n- `defaultLocale`: Sets the default language.\n- `strategy`: Uses `prefix_except_default` to prefix routes with language codes, except for the default language.\n- `detectBrowserLanguage`: Detects the user’s browser language and uses cookies to store preferences.\n- `langDir`: Specifies the directory for language files.\n- `lazy`: Enables lazy loading of language files.\n- `pages`: Uses routes defined in `routes.json`.\n- `customRoutes`: Allows flexible custom route management.\n\n## Creating Language Files\n\nFor each language, create a JSON file in the `lang/` directory. Example for French (lang/fr.json):\n\n```json\n{\n  \"welcome\": \"Bienvenue\",\n  \"about\": \"À propos de nous\",\n  \"contact\": \"Contactez-nous\"\n}\n\n```\n\nRepeat for `en.json` and `es.json`, translating keys accordingly.\n\n## Using Translations in Components\n\nUse translations in components with the `\u003Cnuxt-link>` component and the `$t` method. Example:\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## Browser Language Detection\n\nThe `detectBrowserLanguage` configuration automatically detects the user’s browser language and redirects to the appropriate version of your site. It ensures a consistent user experience by storing language preferences in cookies.\n\n## Managing Custom Routes\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.\nWith the customRoutes configuration, you can define language-specific routes in `routes.json`, allowing granular control of your application’s paths.\n\n\n## Conclusion\n\nInternationalization is a crucial step for making your application accessible to a global audience. Nuxt 3 and the `@nuxtjs/i18n` module simplify and streamline the i18n setup. By following this guide, you can configure your project to support multiple languages and deliver a seamless localized user experience.\n\nNuxt 3’s flexibility, combined with i18n’s robust features, makes it easy to manage translations, language detection, and redirections. Now you’re ready to make your Nuxt 3 app multilingual and reach a broader audience.\n\nFor more details and advanced configurations, consult the official Nuxt i18n documentation. Happy coding!",[47,49],{"id":13,"title":14,"slug":15,"slugs":48,"thumbnail":17,"thumbnail_small":18},{"en":15,"fr":15},{"id":6,"title":7,"slug":8,"slugs":50,"thumbnail":10,"thumbnail_small":11},{"en":8,"fr":8},"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,1792846769137]