Skip to content

Views

Views make up the 'V' in MVC. Views allow you to separate your logic from your presentation layer instead of mixing them together in a single file. This allows you to easily change the look and feel of your application without having to change any of your logic.

View Engines

Leaf comes with support for 3 view engines designed by the team at Leaf:

EngineUse case
bareuiBlazing fast templating with no compile time
veinsLightweight but powerful templating engine
bladeLaravel blade templating engine for leaf

Leaf MVC and Leaf API come with Blade already installed and configured, but of course, you can use any templating engine you prefer. These have first party support, and work amazingly well out of the box.

You can find more information on the Views Docs Page

Defining Views

Views are defined in the app/views directory in Leaf API and Leaf MVC. You can create subdirectories to organize your views based on your preference. For example, you might create a layouts directory to store your layout files. To quickly create a view, you can use the php leaf g:template command from the root of your project.

php leaf g:template home

This will create a file called home.blade.php in the app/views directory.

Rendering Views

Leaf ships a view method as an extension of functional mode. This method allows you to render a view/template found in the views directory. This method accepts two parameters:

  • The name of the view to render
  • Data to pass to the view
echo view('home', ['name' => 'John Doe']);

Notice that we pass the name of the view without the file extension. This is because Leaf will automatically append the correct file extension based on the view engine you're using.

The render() method

To make things even easier for you, Leaf also ships with a render() method. This method accepts the same parameters as the view() method but automatically outputs the views with the correct headers in place.

render('home', ['name' => 'John Doe']);

Asset Bundling

Vite is a modern build tool for frontend applications. It aims to provide a faster and leaner development experience for modern web projects. Leaf allows you to bundle your CSS and JS assets using vite, using the powerful leaf-vite module.

> Read the docs

Frontend Frameworks

Leaf has support for some of the most popular frontend frameworks using Inertia.js. Inertia.js is a framework that allows you to create fully client-side rendered, single-page apps, without much of the complexity that comes with modern SPAs. It does this by leveraging Leaf's server-side rendering capabilities.

> Read the docs

Next Steps

You can continue learning about MVC with Leaf from the sidebar or check out the view engines below:

Views has loaded