Page Head - Radonis Documentation

You can customize the page <title>, <meta> or add miscellaneous tags to the <head> of the page.

Usage

To add tags to the <head> of the page, use the head property on the render options.

// start/routes.ts
import Route from '@ioc:Adonis/Core/Route'
import { SignUp } from '../resources/views/Auth.tsx'


Route.get('/signUp', async ({ radonis }) => {
  return radonis
    .render(SignUp, undefined, {
      head: {
        title: 'Sign up',
        meta: {
          viewport: 'width=device-width, initial-scale=1.0',
        },
      },
    })
})

You can also modify the <head> by calling withHeadTitle, withHeadMeta or withHeadTags in your controllers, routes, middlewares or everywhere radonis is available on the HttpContext.

// app/Controllers/Http/UsersController.ts
import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
import { Index } from '../../../resources/views/Users.tsx'


export default class UsersController {
  public index({ radonis }: HttpContextContract) {
    return radonis
      // Set the <title> tag
      .withHeadTitle('Hello world')
      // Add <meta>
      .withHeadMeta({
        viewport: 'width=device-width, initial-scale=1.0',
      })
      // Add miscellaneous tags like tracking scripts
      .withHeadTags([{
        name: 'script',
        attributes: {
          async: true,
        },
        content: 'alert("Hello world")',
      }])
      // Render the `Index` component
      .render(Index, undefined, {
        head: {
          title: 'Hello world', // Overrides the title set via `withHeadTitle` above
        },
      })
  }
}

Note

Data set via the head property on the render options always overrides data set via withHeadTitle, withHeadMeta or withHeadTags.