



<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      
      
      
      
        <meta name="lang:clipboard.copy" content="Copy to clipboard">
      
        <meta name="lang:clipboard.copied" content="Copied to clipboard">
      
        <meta name="lang:search.language" content="en">
      
        <meta name="lang:search.result.none" content="No matching documents">
      
        <meta name="lang:search.result.one" content="1 matching document">
      
        <meta name="lang:search.result.other" content="# matching documents">
      
        <meta name="lang:search.tokenizer" content="[\s\-]+">
      
      <link rel="shortcut icon" href="../../assets/images/favicon.png">
      <meta name="generator" content="mkdocs-0.17.2, mkdocs-material-2.0.4">
    
    
      
        <title>Views - Vapor Docs</title>
      
    
    
      <link rel="stylesheet" href="../../assets/stylesheets/application-709eec9410.css">
      
        <link rel="stylesheet" href="../../assets/stylesheets/application-23f75ab9c7.palette.css">
      
    
    
      <script src="../../assets/javascripts/modernizr-e826f8942a.js"></script>
    
    
      
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono">
        <style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style>
      
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    
    
    
  </head>
  
    
    
    
      <body data-md-color-primary="blue" data-md-color-accent="purple">
    
  
    <svg class="md-svg">
      <defs>
        
        
          <svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448" id="github"><path fill="currentColor" d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z"/></svg>
        
      </defs>
    </svg>
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="drawer">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="search">
    <label class="md-overlay" data-md-component="overlay" for="drawer"></label>
    
      <header class="md-header" data-md-component="header">
  <nav class="md-header-nav md-grid">
    <div class="md-flex">
      <div class="md-flex__cell md-flex__cell--shrink">
        <a href="../.." title="Vapor Docs" class="md-header-nav__button md-logo">
          
            <img src="../../images/droplet-white.svg" width="24" height="24">
          
        </a>
      </div>
      <div class="md-flex__cell md-flex__cell--shrink">
        <label class="md-icon md-icon--menu md-header-nav__button" for="drawer"></label>
      </div>
      <div class="md-flex__cell md-flex__cell--stretch">
        <span class="md-flex__ellipsis md-header-nav__title">
          
            
              
                <span class="md-header-nav__parent">
                  Vapor
                </span>
              
            
            Views
          
        </span>
      </div>
      <div class="md-flex__cell md-flex__cell--shrink">
        
          
            <label class="md-icon md-icon--search md-header-nav__button" for="search"></label>
            
<div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="search"></label>
  <div class="md-search__inner">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" required placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query">
      <label class="md-icon md-search__icon" for="search"></label>
      <button type="reset" class="md-icon md-search__icon" data-md-component="reset">&#xE5CD;</button>
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="result">
          <div class="md-search-result__meta">
            Type to start searching
          </div>
          <ol class="md-search-result__list"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
          
        
      </div>
      
        <div class="md-flex__cell md-flex__cell--shrink">
          <div class="md-header-nav__source">
            


  


  <a href="http://github.com/vapor/vapor/" title="Go to repository" class="md-source" data-md-source="github">
    
      <div class="md-source__icon">
        <svg viewBox="0 0 24 24" width="24" height="24">
          <use xlink:href="#github" width="24" height="24"></use>
        </svg>
      </div>
    
    <div class="md-source__repository">
      GitHub
    </div>
  </a>

          </div>
        </div>
      
    </div>
  </nav>
</header>
    
    <div class="md-container">
      
      <main class="md-main">
        <div class="md-main__inner md-grid" data-md-component="container">
          
            
              <div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    <nav class="md-nav md-nav--primary" data-md-level="0">
  <label class="md-nav__title md-nav__title--site" for="drawer">
    <span class="md-nav__button md-logo">
      
        <img src="../../images/droplet-white.svg" width="24" height="24">
      
    </span>
    Vapor Docs
  </label>
  
    <div class="md-nav__source">
      


  


  <a href="http://github.com/vapor/vapor/" title="Go to repository" class="md-source" data-md-source="github">
    
      <div class="md-source__icon">
        <svg viewBox="0 0 24 24" width="24" height="24">
          <use xlink:href="#github" width="24" height="24"></use>
        </svg>
      </div>
    
    <div class="md-source__repository">
      GitHub
    </div>
  </a>

    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
      


  <li class="md-nav__item">
    <a href="../.." title="Overview" class="md-nav__link">
      Overview
    </a>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-2" type="checkbox" id="nav-2">
    
    <label class="md-nav__link" for="nav-2">
      Getting started
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-2">
        Getting started
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../getting-started/install-on-macos/" title="Install: macOS" class="md-nav__link">
      Install: macOS
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../getting-started/install-on-ubuntu/" title="Install: Ubuntu" class="md-nav__link">
      Install: Ubuntu
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../getting-started/toolbox/" title="Toolbox" class="md-nav__link">
      Toolbox
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../getting-started/hello-world/" title="Hello, World" class="md-nav__link">
      Hello, World
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../getting-started/manual/" title="Manual" class="md-nav__link">
      Manual
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../getting-started/xcode/" title="Xcode" class="md-nav__link">
      Xcode
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      

  


  <li class="md-nav__item md-nav__item--active md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-3" type="checkbox" id="nav-3" checked>
    
    <label class="md-nav__link" for="nav-3">
      Vapor
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-3">
        Vapor
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../folder-structure/" title="Folder Structure" class="md-nav__link">
      Folder Structure
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../droplet/" title="Droplet" class="md-nav__link">
      Droplet
    </a>
  </li>

        
          
          
          

  


  <li class="md-nav__item md-nav__item--active">
    
    <input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="toc">
    
      
    
    
      <label class="md-nav__link md-nav__link--active" for="toc">
        Views
      </label>
    
    <a href="./" title="Views" class="md-nav__link md-nav__link--active">
      Views
    </a>
    
      
<nav class="md-nav md-nav--secondary">
  
  
    
  
  
    <label class="md-nav__title" for="toc">Table of contents</label>
    <ul class="md-nav__list" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#views-directory" title="Views Directory" class="md-nav__link">
    Views Directory
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#html" title="HTML" class="md-nav__link">
    HTML
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#templating" title="Templating" class="md-nav__link">
    Templating
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#public-resources" title="Public Resources" class="md-nav__link">
    Public Resources
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#view-renderer" title="View Renderer" class="md-nav__link">
    View Renderer
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#available-renderers" title="Available Renderers" class="md-nav__link">
    Available Renderers
  </a>
  
</li>
      
      
      
    </ul>
  
</nav>
    
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../controllers/" title="Controllers" class="md-nav__link">
      Controllers
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../provider/" title="Provider" class="md-nav__link">
      Provider
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../hash/" title="Hash" class="md-nav__link">
      Hash
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../log/" title="Log" class="md-nav__link">
      Log
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../commands/" title="Commands" class="md-nav__link">
      Commands
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4" type="checkbox" id="nav-4">
    
    <label class="md-nav__link" for="nav-4">
      Configs
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-4">
        Configs
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../configs/config/" title="Config" class="md-nav__link">
      Config
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-5" type="checkbox" id="nav-5">
    
    <label class="md-nav__link" for="nav-5">
      JSON
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-5">
        JSON
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../json/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../json/overview/" title="Overview" class="md-nav__link">
      Overview
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-6" type="checkbox" id="nav-6">
    
    <label class="md-nav__link" for="nav-6">
      Routing
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-6">
        Routing
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../routing/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../routing/overview/" title="Overview" class="md-nav__link">
      Overview
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../routing/parameters/" title="Parameters" class="md-nav__link">
      Parameters
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../routing/group/" title="Group" class="md-nav__link">
      Group
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../routing/collection/" title="Collection" class="md-nav__link">
      Collection
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
    
    <label class="md-nav__link" for="nav-7">
      Fluent
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-7">
        Fluent
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../fluent/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../fluent/getting-started/" title="Getting Started" class="md-nav__link">
      Getting Started
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../fluent/model/" title="Model" class="md-nav__link">
      Model
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../fluent/database/" title="Database" class="md-nav__link">
      Database
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../fluent/query/" title="Query" class="md-nav__link">
      Query
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../fluent/relations/" title="Relations" class="md-nav__link">
      Relations
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
    
    <label class="md-nav__link" for="nav-8">
      Cache
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-8">
        Cache
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../cache/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../cache/overview/" title="Overview" class="md-nav__link">
      Overview
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
    
    <label class="md-nav__link" for="nav-9">
      MySQL
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-9">
        MySQL
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../mysql/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../mysql/provider/" title="Provider" class="md-nav__link">
      Provider
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../mysql/driver/" title="Driver" class="md-nav__link">
      Driver
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
    
    <label class="md-nav__link" for="nav-10">
      Redis
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-10">
        Redis
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../redis/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../redis/provider/" title="Provider" class="md-nav__link">
      Provider
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-11" type="checkbox" id="nav-11">
    
    <label class="md-nav__link" for="nav-11">
      Auth
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-11">
        Auth
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../auth/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../auth/provider/" title="Provider" class="md-nav__link">
      Provider
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../auth/getting-started/" title="Getting Started" class="md-nav__link">
      Getting Started
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../auth/helper/" title="Helper" class="md-nav__link">
      Helper
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../auth/password/" title="Password" class="md-nav__link">
      Password
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../auth/persist/" title="Persist" class="md-nav__link">
      Persist
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../auth/redirect-middleware/" title="Redirect Middleware" class="md-nav__link">
      Redirect Middleware
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-12" type="checkbox" id="nav-12">
    
    <label class="md-nav__link" for="nav-12">
      JWT
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-12">
        JWT
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../jwt/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../jwt/overview/" title="Overview" class="md-nav__link">
      Overview
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-13" type="checkbox" id="nav-13">
    
    <label class="md-nav__link" for="nav-13">
      Sessions
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-13">
        Sessions
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../sessions/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../sessions/sessions/" title="Sessions" class="md-nav__link">
      Sessions
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-14" type="checkbox" id="nav-14">
    
    <label class="md-nav__link" for="nav-14">
      HTTP
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-14">
        HTTP
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../http/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../http/request/" title="Request" class="md-nav__link">
      Request
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../http/response/" title="Response" class="md-nav__link">
      Response
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../http/middleware/" title="Middleware" class="md-nav__link">
      Middleware
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../http/body/" title="Body" class="md-nav__link">
      Body
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../http/response-representable/" title="ResponseRepresentable" class="md-nav__link">
      ResponseRepresentable
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../http/responder/" title="Responder" class="md-nav__link">
      Responder
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../http/client/" title="Client" class="md-nav__link">
      Client
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../http/server/" title="Server" class="md-nav__link">
      Server
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../http/cors/" title="CORS" class="md-nav__link">
      CORS
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-15" type="checkbox" id="nav-15">
    
    <label class="md-nav__link" for="nav-15">
      Leaf
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-15">
        Leaf
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../leaf/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../leaf/provider/" title="Provider" class="md-nav__link">
      Provider
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../leaf/leaf/" title="Overview" class="md-nav__link">
      Overview
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-16" type="checkbox" id="nav-16">
    
    <label class="md-nav__link" for="nav-16">
      Validation
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-16">
        Validation
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../validation/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../validation/overview/" title="Overview" class="md-nav__link">
      Overview
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-17" type="checkbox" id="nav-17">
    
    <label class="md-nav__link" for="nav-17">
      Node
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-17">
        Node
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../node/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../node/getting-started/" title="Getting Started" class="md-nav__link">
      Getting Started
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-18" type="checkbox" id="nav-18">
    
    <label class="md-nav__link" for="nav-18">
      Core
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-18">
        Core
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../core/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../core/overview/" title="Overview" class="md-nav__link">
      Overview
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-19" type="checkbox" id="nav-19">
    
    <label class="md-nav__link" for="nav-19">
      Bits
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-19">
        Bits
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../bits/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../bits/overview/" title="Overview" class="md-nav__link">
      Overview
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-20" type="checkbox" id="nav-20">
    
    <label class="md-nav__link" for="nav-20">
      Debugging
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-20">
        Debugging
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../debugging/package/" title="Package" class="md-nav__link">
      Package
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../debugging/overview/" title="Overview" class="md-nav__link">
      Overview
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-21" type="checkbox" id="nav-21">
    
    <label class="md-nav__link" for="nav-21">
      Deploy
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-21">
        Deploy
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../deploy/cloud/" title="Cloud" class="md-nav__link">
      Cloud
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../deploy/nginx/" title="Nginx" class="md-nav__link">
      Nginx
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../deploy/apache2/" title="Apache2" class="md-nav__link">
      Apache2
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../deploy/supervisor/" title="Supervisor" class="md-nav__link">
      Supervisor
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-22" type="checkbox" id="nav-22">
    
    <label class="md-nav__link" for="nav-22">
      Version (2.0)
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-22">
        Version (2.0)
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../../version/1_5/" title="1.5" class="md-nav__link">
      1.5
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../version/2_0/" title="2.0" class="md-nav__link">
      2.0
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../version/3_0/" title="3.0-beta" class="md-nav__link">
      3.0-beta
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../../version/support/" title="Support" class="md-nav__link">
      Support
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              <div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    
<nav class="md-nav md-nav--secondary">
  
  
    
  
  
    <label class="md-nav__title" for="toc">Table of contents</label>
    <ul class="md-nav__list" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#views-directory" title="Views Directory" class="md-nav__link">
    Views Directory
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#html" title="HTML" class="md-nav__link">
    HTML
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#templating" title="Templating" class="md-nav__link">
    Templating
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#public-resources" title="Public Resources" class="md-nav__link">
    Public Resources
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#view-renderer" title="View Renderer" class="md-nav__link">
    View Renderer
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#available-renderers" title="Available Renderers" class="md-nav__link">
    Available Renderers
  </a>
  
</li>
      
      
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          <div class="md-content">
            <article class="md-content__inner md-typeset">
              
                
                  <a href="https://github.com/vapor/documentation/edit/master/3.0/docs/vapor/views.md" title="Edit this page" class="md-icon md-content__icon">&#xE3C9;</a>
                
                
                <h1 id="views">Views<a class="headerlink" href="#views" title="Permanent link">&para;</a></h1>
<p>Views return HTML data from your application. They can be created from pure HTML documents or passed through renderers such as <a href="../../leaf/leaf/">Leaf</a>.</p>
<h2 id="views-directory">Views Directory<a class="headerlink" href="#views-directory" title="Permanent link">&para;</a></h2>
<p>Views are stored in <code>Resources/Views</code>. They are created by calling the <code>view</code> method on <code>Droplet</code>.</p>
<h2 id="html">HTML<a class="headerlink" href="#html" title="Permanent link">&para;</a></h2>
<p>Returning HTML, or any other non-rendered document, is simple. Just use the path of the document relative to the views directory.</p>
<div class="codehilite"><pre><span></span><span class="n">drop</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s">&quot;html&quot;</span><span class="p">)</span> <span class="p">{</span> <span class="n">request</span> <span class="k">in</span>
    <span class="k">return</span> <span class="k">try</span> <span class="n">drop</span><span class="p">.</span><span class="n">view</span><span class="p">.</span><span class="n">make</span><span class="p">(</span><span class="s">&quot;index.html&quot;</span><span class="p">)</span>
<span class="p">}</span>
</pre></div>


<h2 id="templating">Templating<a class="headerlink" href="#templating" title="Permanent link">&para;</a></h2>
<p>Templated documents like <a href="../../leaf/leaf/">Leaf</a> can take a <code>Context</code>.</p>
<div class="codehilite"><pre><span></span><span class="n">drop</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s">&quot;template&quot;</span><span class="p">)</span> <span class="p">{</span> <span class="n">request</span> <span class="k">in</span>
    <span class="k">return</span> <span class="k">try</span> <span class="n">drop</span><span class="p">.</span><span class="n">view</span><span class="p">.</span><span class="n">make</span><span class="p">(</span><span class="s">&quot;welcome&quot;</span><span class="p">,</span> <span class="p">[</span>
        <span class="s">&quot;message&quot;</span><span class="p">:</span> <span class="s">&quot;Hello, world!&quot;</span>
    <span class="p">])</span>
<span class="p">}</span>
</pre></div>


<p>This context will be rendered in the view dynamically based on the <code>ViewRenderer</code> used.</p>
<h2 id="public-resources">Public Resources<a class="headerlink" href="#public-resources" title="Permanent link">&para;</a></h2>
<p>Any resources that your views need, such as images, styles, and scripts, should be placed in the <code>Public</code> folder at the root of your application.</p>
<h2 id="view-renderer">View Renderer<a class="headerlink" href="#view-renderer" title="Permanent link">&para;</a></h2>
<p>Any class that conforms to <code>ViewRenderer</code> can be added to our droplet. </p>
<div class="codehilite"><pre><span></span><span class="kd">import</span> <span class="nc">Vapor</span>
<span class="kd">import</span> <span class="nc">VaporLeaf</span>

<span class="kd">let</span> <span class="nv">drop</span> <span class="p">=</span> <span class="n">Droplet</span><span class="p">()</span>

<span class="n">drop</span><span class="p">.</span><span class="n">view</span> <span class="p">=</span> <span class="n">LeafRenderer</span><span class="p">(</span><span class="n">viewsDir</span><span class="p">:</span> <span class="n">drop</span><span class="p">.</span><span class="n">viewsDir</span><span class="p">)</span>
</pre></div>


<h2 id="available-renderers">Available Renderers<a class="headerlink" href="#available-renderers" title="Permanent link">&para;</a></h2>
<p><a href="https://github.com/search?utf8=✓&amp;q=topic%3Avapor-provider+topic%3Aviews&amp;type=Repositories">Search GitHub</a> for Vapor view <a href="../provider/">providers</a> that can be added to your application.</p>
                
                  
                
              
              
                
              
            </article>
          </div>
        </div>
      </main>
      
        
<footer class="md-footer">
  
    <div class="md-footer-nav">
      <nav class="md-footer-nav__inner md-grid">
        
          <a href="../droplet/" title="Droplet" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
            <div class="md-flex__cell md-flex__cell--shrink">
              <i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
            </div>
            <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
              <span class="md-flex__ellipsis">
                <span class="md-footer-nav__direction">
                  Previous
                </span>
                Droplet
              </span>
            </div>
          </a>
        
        
          <a href="../controllers/" title="Controllers" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
            <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
              <span class="md-flex__ellipsis">
                <span class="md-footer-nav__direction">
                  Next
                </span>
                Controllers
              </span>
            </div>
            <div class="md-flex__cell md-flex__cell--shrink">
              <i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i>
            </div>
          </a>
        
      </nav>
    </div>
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-footer-copyright">
        
          <div class="md-footer-copyright__highlight">
            Copyright &copy; 2017 Qutheory, LLC
          </div>
        
        powered by
        <a href="http://www.mkdocs.org" title="MkDocs">MkDocs</a>
        and
        <a href="http://squidfunk.github.io/mkdocs-material/" title="Material for MkDocs">
          Material for MkDocs</a>
      </div>
      
        
  <div class="md-footer-social">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
      <a href="https://twitter.com/@codevapor" class="md-footer-social__link fa fa-twitter"></a>
    
      <a href="http://vapor.team/" class="md-footer-social__link fa fa-slack"></a>
    
  </div>

      
    </div>
  </div>
</footer>
      
    </div>
    
      <script src="../../assets/javascripts/application-8e4952e681.js"></script>
      
      <script>app.initialize({version:"0.17.2",url:{base:"../.."}})</script>
      
    
    
      
      <script>!function(e,t,a,n,o,c,i){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,c=t.createElement(a),i=t.getElementsByTagName(a)[0],c.async=1,c.src=n,i.parentNode.insertBefore(c,i)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-76177358-4","auto"),ga("set","anonymizeIp",!0),ga("send","pageview");var links=document.getElementsByTagName("a");Array.prototype.map.call(links,function(e){e.host!=document.location.host&&e.addEventListener("click",function(){var t=e.getAttribute("data-md-action")||"follow";ga("send","event","outbound",t,e.href)})});var query=document.forms.search.query;query.addEventListener("blur",function(){if(this.value){var e=document.location.pathname;ga("send","pageview",e+"?q="+this.value)}})</script>
      
    
  </body>
</html>