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.

<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.

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

@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.

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

@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.

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

@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