Viewi Viewi

Documentation

Viewi v2

  1. Introduction
  2. Get started
  3. Installation
  4. Configuration
  5. Watching mode
  6. Creating Components
  7. Template Syntax
  8. Conditional Rendering
  9. List Rendering
  10. Event Handling
  11. Form input bindings
  12. Components Basics
  13. Components and services
  14. Components In-Depth
  15. Extending with JavaScript
  16. Caveats
  17. Startup
  18. Global methods
  19. Traits support
  20. Watch feature
  21. Routing
  22. Lazy loading routes and components
  23. Guards and Middleware
  24. Reusing layouts
  25. Client route
  26. Data fetching and HTTP client
  27. HTTP interceptors
  28. Portals
  29. Viewi assets
  30. CSS bundle
  31. Public configuration
  32. Frameworks integration and bridge
  33. Viewi Engine
  34. CodeIgniter4
  35. Laravel
  36. Leaf
  37. ReactPHP
  38. Subscriptions
  39. DOM helper
  40. Client Timer
  41. WebSocket client

Portals

Portals allows you to render something outside of the current DOM element or outside of the current component.

Useful when you need to display the content somewhere outside of your component. Like modal windows or tooltips.

Using portals

To define the content that should be rendered somewhere else simply use the Portal component with to attribute:

<Portal to="body">
    <div>
        This should appear at the end of the body (portal with name "body").
        Title of the page: $title
    </div>
</Portal>

Component Portal with attribute name defines a destination of your content:

<Portal name="body" />
<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        $title | Viewi
    </title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

<body>
    <Portal name="header" />
    <div id="content">
        <slot></slot>
    </div>
    <Portal name="body" />
    <ViewiAssets />
</body>
</html>

You can port as many contents as you want.

<Portal to="body">
    <div>
        This should appear at the end of the body (portal with name "body").
        Title of the page: $title
    </div>
</Portal>
<div>My component</div>
<Portal to="body">
    <div>
        Body: $title
    </div>
</Portal>

Important: The name of the portal should be unique across your application and you can have only one portal with such name.

Server-side rendering and portals

Portals have full server-side rendering (SSR) support unless you specify different with custom JavaScript or conditions. In that case, you should write your code with consideration of the hydration process.