Edge helpers and tags

Edge helpers and tags

In this guide, we will learn about the helpers and the tags contributed to Edge by the AdonisJS official packages. The helpers shipped with Edge are not covered in this guide and must reference Edge documentation for the same.

request

Reference to the instance of ongoing HTTP request. The property is only available when a template is rendered using the ctx.view.render method.

{{ request.url() }}
{{ request.input('signature') }}

route/signedRoute

Helper functions to create URL for a route using the URL builder. Unlike the URL builder, the view helpers do not have a fluent API and accept the following parameters.

Position Description
1st The route identifier or the route pattern
2nd Route params are defined as an array or an object.
3rd

The options object with the following properties.

  • qs: Define query string parameters as an object.
  • domain: Search for routes under a specific domain.
  • prefixUrl: Prefix a URL to the output.
  • disableRouteLookup: Enable/disable routes lookup.
<a href="{{ route('posts.show', [post.id]) }}">
View post
</a>
<a href="{{
signedRoute('unsubscribe', [user.id], {
expiresIn: '3 days',
prefixUrl: 'https://blog.adonisjs.com'
})
}}">
Unsubscribe
</a>

app

Reference to the Application instance.

{{ app.getEnvironment() }}

config

A helper function to reference configuration values inside Edge templates. You may use the config.has method to check if the value for a key exists.

@if(config.has('app.appUrl'))
<a href="{{ config('app.appUrl') }}"> Home </a>
@else
<a href="/"> Home </a>
@end

session

A read-only copy of the session object. You cannot mutate session data within Edge templates. The session property is only available when the template is rendered using the ctx.view.render method.

Post views: {{ session.get(`post.${post.id}.visits`) }}

flashMessages

A read-only copy of session flash messages. The flashMessages property is only available when the template is rendered using the ctx.view.render method.

@if(flashMessages.has('inputErrorsBag.title'))
<p>{{ flashMessages.get('inputErrorsBag.title') }}</p>
@end
@if(flashMessages.has('notification'))
<div class="notification {{ flashMessages.get('notification').type }}">
{{ flashMessages.get('notification').message }}
</div>
@end

old

The old method is a shorthand for the flashMessages.get method.

<input
type="text"
name="email"
value="{{ old('name') || '' }}"
/>

t

The t method is contributed by the @adonisjs/i18n package to display translations using the i18n class. The method accepts the translation key identifier, message data and a fallback message as the parameters.

<h1> {{ t('messages.greeting') }} </h1>

i18n

Reference to an instance of the I18n class configured using the application's default locale. However, the DetectUserLocaleMiddleware overrides this property with an instance created for the current HTTP request locale.

{{ i18n.formatCurrency(200, { currency: 'USD' }) }}

auth

Reference to the ctx.auth property shared by the InitializeAuthMiddleware. You may use this property to access information about the logged-in user.

@if(auth.isAuthenticated)
<p> {{ auth.user.email }} </p>
@end

If you are displaying the logged-in user info on a public page (not protected by the auth middleware), then you may want to first silently check if the user is logged-in or not.

{{-- Check if user is logged-in --}}
@eval(await auth.use('web').check())
@if(auth.use('web').isAuthenticated)
<p> {{ auth.use('web').user.email }} </p>
@end

asset

Resolve the URL of an asset processed by Vite. Learn more about referencing assets inside Edge templates.

<img src="{{ asset('resources/images/hero.jpg') }}" />

embedImage / embedImageData

The embedImage and the embedImageData helpers are added by the mail package and are only available when rendering a template to send an email.

<img src="{{
embedImage(app.makePath('assets/hero.jpg'))
}}" />

@flashMessage

The @flashMessage tag provides a better DX for reading flash messages for a given key conditionally.

Instead of writing conditionals

@if(flashMessages.has('notification'))
<div class="notification {{ flashMessages.get('notification').type }}">
{{ flashMessages.get('notification').message }}
</div>
@end

You may prefer using the tag

@flashMessage('notification')
<div class="notification {{ $message.type }}">
{{ $message.message }}
</div>
@end

@error

The @error tag provides a better DX for reading error messages stored inside the errorsBag key in flashMessages.

Instead of writing conditionals

@if(flashMessages.has('errorsBag.E_BAD_CSRF_TOKEN'))
<p>{{ flashMessages.get('errorsBag.E_BAD_CSRF_TOKEN') }}</p>
@end

You may prefer using the tag

@error('E_BAD_CSRF_TOKEN')
<p>{{ $message }}</p>
@end

@inputError

The @inputError tag provides a better DX for reading validation error messages stored inside the inputErrorsBag key in flashMessages.

Instead of writing conditionals

@if(flashMessages.has('inputErrorsBag.title'))
@each(message in flashMessages.get('inputErrorsBag.title'))
<p>{{ message }}</p>
@end
@end

You may prefer using the tag

@inputError('title')
@each(message in $messages)
<p>{{ message }}</p>
@end
@end

@vite

The @vite tag accepts an array of entry point paths and returns the script and the link tags for the same. The path you provide to the @vite tag should match exactly the path registered inside the vite.config.js file.

export default defineConfig({
plugins: [
adonisjs({
entrypoints: ['resources/js/app.js'],
}),
]
})
@vite(['resources/js/app.js'])

You can define the script tag attributes as the 2nd argument. For example:

@vite(['resources/js/app.js'], {
defer: true,
})

@viteReactRefresh

The @viteReactRefresh tag returns a script tag to enable React HMR for project using the @vitejs/plugin-react package.

@viteReactRefresh()

Output HTML

<script type="module">
import RefreshRuntime from 'http://localhost:5173/@react-refresh'
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>

@can/@cannot

The @can and @cannot tags allows you write authorization checks in Edge templates by referencing the ability name or the policy name as a string.

The first argument is the ability or the policy reference followed by the arguments accepted by the check.

See also: Pre-registering abilities and policies

@can('editPost', post)
{{-- Can edit post --}}
@end
@can('PostPolicy.edit', post)
{{-- Can edit post --}}
@end
@cannot('editPost', post)
{{-- Cannot edit post --}}
@end
@cannot('editPost', post)
{{-- Cannot edit post --}}
@end