Vision

• Introduction
• Displaying Data
• Vision Directives
  • If Statements
  • Loops Statements
  • Resources
  • Components
  • Assets

Introduction

Vision is a straightforward template engine inspired by Laravel's Blade. It allows the use of plain PHP in templates, and Vision templates are compiled into plain PHP and cached until the template is modified. This ensures that the view is compiled only once after detection of modifications, and subsequently, only the compiled version is rendered.

Vision template files have the extension .vision.php and are typically stored in the resources/views folder. They can be returned by routes or controllers using the global helper method called view. Of course, data can be passed to Vision views:

                                
                                    

                                        Route::get('/', function() {
                                    
                                    

                                        return view('greeting', ['name' => 'John']);
                                    
                                    

                                        });
                                    
                                
                            

Displaying Data

In Vision, you can display data that is passed to your views by wrapping the variable in curly braces. For example, given the following route:

                                
                                    

                                        Route::get('/', function() {
                                    
                                    

                                        return view('greeting', ['name' => 'John']);
                                    
                                    

                                        });
                                    
                                
                            

You can display the contents of the name variable like this:

                                
                                    

                                        Welcome, {{ $name }}
                                    
                                
                            

Vision's {{ }} echo statements are automatically processed through PHP's htmlspecialchars function to prevent XSS attacks.

Moreover, you are not limited to displaying the contents of the variables passed to the view. You can also echo the results of any PHP function. In fact, you can insert any PHP code you wish inside a Vision echo statement:

                                
                                    

                                        The current UNIX timestamp is {{ time() }}
                                    
                                
                            

Vision Directives

In addition to template inheritance and displaying data, Vision provides convenient shortcuts for common PHP control structures, such as conditional statements and loops. These shortcuts offer a clean and concise way to work with PHP control structures while remaining familiar to their PHP counterparts.

If Statements

You can construct if statements using the @if, @elseif, @else, and @endif directives in Vision. These directives function identically to their PHP counterparts:

                                
                                    

                                        @if (count([1]) === 1)
                                    
                                    

                                        I have one record!
                                    
                                    

                                        @elseif (count([2]) > 1)
                                    
                                    

                                        I have multiple records!
                                    
                                    

                                        @else
                                    
                                    

                                        I don't have any records!
                                    
                                    

                                        @endif
                                    
                                
                            

Loops Statements

                                
                                    

                                        @foreach ($users as $user)
                                    
                                    

                                        <p>This is user {{ $user->id }}</p>
                                    
                                    

                                        @endforeach
                                    
                                
                            

Resources

The @resources directive allows you to import a specific style or script directly into your view. The entry point for this method is the /resources folder. The specified style or script will be minified for optimization purposes and directly injected into the compiled view.

                                
                                    

                                        <style>
                                    
                                    

                                        @resource(css/welcome.css)
                                    
                                    

                                        </style>
                                    
                                
                            

Modifying a file imported using the @resources directive may not be automatically detected by the view compiler. To observe changes, you should force a recompilation of the specific view, for example, by saving it again. This ensures that any modifications to the imported file are reflected in the compiled view.

Components

The @components directive enables the importing of other views into a specific view. Nested views will be correctly compiled by Vision, allowing changes in the imported file to be immediately visible without the need for manual recompilation. This makes it a tool for structuring and organizing your views, enhancing code reusability, and simplifying maintenance.

                                
                                    

                                        @component(components/button)
                                    
                                
                            

Assets

While not a direct Vision directive, the asset method is a commonly used helper function within views. It allows you to specify an asset, such as an image, style, or script located in the public folder of your application.

To ensure a proper view structure, it is recommended to place styles, scripts, and images in the /storage/app/public folder. Then, create a symbolic link to this folder to make it accessible from the browser. For example, by running the following command:

                                
                                    

                                        php dfork storage:link uploads
                                    
                                
                            

You can then utilize the asset helper in your view:

                                
                                    

                                        <link href="{{ asset('uploads/css/styles.css') }}" />
                                    
                                
                            

Vision will translate this into a valid link pointing to https://example.com/uploads/css/styles.css. This ensures correct asset handling and accessibility in your application.