Skip to main content

Vania Template

Introduction​

Vania Template is a simple, lightweight way to render views in a Your application. Template files use the .html extension and usually live in the lib/views/template folder.

You can return these templates from routes and controllers by using the view helper function. You can also pass data to a template by using the second argument of the view function:

Router.get('/dashboard', () => view('dashboard'));

If you want to pass data to the view, you can do:

Router.get('/dashboard', () => view('dashboard', {'name': 'Vania'}));

Displaying Data​

To show data in your templates, wrap your variables with @{ }. For example, if you pass a name variable to your template:

Router.get('/dashboard', () => view('dashboard', {'name': 'Vania'}));

You can display it in your .html file like this:

Hello, @{ name }.

If Statements​

You can use if statements in your templates with these directives:

  • {@ if condition @}
  • {@ elseif(condition) @}
  • {@ else @}
  • {@ endif @}

They work like normal if statements in other languages:

{@ if is_admin @} 
    You are an admin!
{@ elseif(company) @} 
    You are a company user.
{@ else @} 
    You are a regular user.
{@ endif @}

{@ if (name == 'Vania') @} 
    Hi Vania!
{@ endif @}

Switch Statements​

Switch statements are also supported. Use {@ switch @}, then list your cases with {@ case @}, and close with {@ endswitch @}:

{@ switch role @}
    {@ case admin @}
        <span style="color:red">Admin Role</span>
    {@ endcase @}

    {@ case user @}
        <span style="color:blue">User Role</span>
    {@ endcase @}

    {@ default @}
        <span style="color:gray">Default Role</span>
    {@ enddefault @}
{@ endswitch @}

Loops​

You can loop through lists or run standard for loops:

{@ for user in users @}
    Index: @{ index } — Name: @{ user.name }
{@ endfor @}

{@ for i=0; i<3; i++ @}
    Index -> @{ i } — Name: @{ users[i].name }
{@ endfor @}

{@ for i=0; i<3; i++ @}
    {@ for j=0; j<=i; j++ @}
        @{ i } - @{ j }
    {@ endfor @}
{@ endfor @}
  • In {@ for user in users @}, each user is taken from the users list, and index shows the loop number.
  • In {@ for i=0; i<3; i++ @}, this works like a normal for loop, counting from 0 to 2.

Including Subviews​

Use the {@ include('path') @} directive to include another template inside your current view. The included file will have access to the parent’s variables:

<div>
    {@ include('shared/errors') @}
    <form>
        <!-- Form Contents -->
    </form>
</div>

You can also pass extra data to the included view:

{@ include('view/name', {"title": "Vania Dart"}) @}

Comments​

To write comments that won't appear in the final HTML, wrap them with {@# ... #@}:

{@# This comment will not appear in the rendered HTML #@}

Layouts Using Template Inheritance​

You can create layouts for your application by defining "sections" with the {@ yield('sectionName') @} directive:

<html>
    <head>
        <title>App Name - {@ yield('title') @}</title>
    </head>
    <body>
        {@ yield('sidbar') @}
        <div class="container">
            {@ yield('content') @}
        </div>
    </body>
</html>

Extending a Layout​

In a child view, use the {@ extends('path') @} directive to inherit a layout. Then define sections with {@ section('sectionName') @}:

{@ extends('partials/app') @}

{@ section('page-title', 'User Page') @}

{@ section('sidbar') @}
    This is the master sidebar.
{@ endsection @}

{@ section('content') @}
    <!-- Page content goes here -->
{@ endsection @}

Anything in {@ section('sidbar') @} or other sections will replace the {@ yield('sidbar') @} placeholder in the layout.

Forms​

CSRF Field​

When you create an HTML form, you should include a hidden CSRF token to protect against Cross-Site Request Forgery attacks. You can generate this token by using:

<form method="POST" action="/profile">
    {@ csrf @}
    ...
</form>

If you need the raw CSRF token for an AJAX (JavaScript) request, you can use:


<script>
   let token = "{@ csrf_token() @}";
   // Now you can include 'token' in your AJAX headers or data.
</script>

Validation Errors​

If your application uses validation and passes validation errors to the template (for example, in a variable called errors), you can check for them with hasError('fieldName') and display them with {@ error('fieldName') @}:

<div class="fv-row mb-8">
    <input 
        type="email" 
        placeholder="Email" 
        name="email" 
        value="{@ old('email') @}" 
        class="form-control bg-transparent {@ if(hasError('email')) @} is-invalid {@ endif @}" 
    />
    {@ if(hasError('email')) @} 
        <div class="invalid-feedback">{@ error('email') @}</div> 
    {@ endif @}
</div>

<div class="fv-row mb-3">
    <input 
        type="password" 
        placeholder="Password" 
        name="password"
        class="form-control bg-transparent {@ if(hasError('password')) @} is-invalid {@ endif @}"
    />
    {@ if(hasError('password')) @} 
        <div class="invalid-feedback">{@ error('password') @}</div> 
    {@ endif @}
</div>

Here, {@ old('email') @} preserves the old input so the user doesn't have to retype it when the form is redisplayed.

Showing Session Messages​

Sometimes you might redirect back with an error or success message, for example Response.back('error', 'Error Message'). You can check if a session variable exists with hasSession('key'), and you can display it with {@ session('key') @}:

{@ if(hasSession('error')) @}
    <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
        {@ session('error') @}
    </div> 
{@ endif @}