Passing Laravel route to Maizzle button

Maizzle is a framework that helps us quickly build HTML emails with Tailwind CSS. We can integrate it into our Laravel project to create beautiful emails.

By default, Maizzle provides us with a button component which can be used as a CTA button in our emails, like:

<x-button href="https://maizzle.com" class="bg-slate-950 hover:bg-slate-800">Verify email</x-button>

In Laravel, it's common to use the helper route to create links to different routes of the project.

For a "Verify email" button like the previous, we might modify it to something like this:

<x-button href="route('auth.verify-email')" class="bg-slate-950 hover:bg-slate-800">Verify email</x-button>

If we generate the email with this code, Maizzle will output this:

<a href="route('dns-check.results', [$check->project, $check])"

As you can see, the URL will not work as it was placed without being interpreted.

We might try to add the curly brackets to allow the route helper to be interpreted:

<x-button href="{{ route('auth.verify-email') }}"

But Maizzle will generate this:

<a href="{{ route(&amp;#039;auth.verify-email&amp;#039;) }}"

Ok, that's not working, maybe we need to add @ to escape the content:

<x-button href="@{{ route('auth.verify-email') }}"

With these, Maizzle will generate:

<a href="{{ route(&#039;auth.verify-email&#039;]) }}"

As you can see, this is not working.

The solution is to escape the content within the button component, not outside.

So we will use the button as:

<x-button href="route('auth.verify-email')"

And the button.html component should be modified from:

<a attributes href="{{{ href }}}"

To this:

<a attributes href="@{{ {{{ href }}} }}"

If we try it again, Maizzle will generate this:

<a href="{{ route('auth.verify-email') }}"

Now, when we send the email from our Laravel app, the button will have the correct link.