Skip to content

Sage Docs

Components

Fundamentally, Components don't do anything you couldn't also accomplish with partials and Composers, but they provide system of interaction and a mental model that can be more intuitive. Like Composers and Blade templates, Components are an extension of the Laravel feature, so the Laravel documentation applies.

Generally a Component consists of:

  1. A Blade template in /resources/views/components/.
  2. A Composer-like class in /app/View/Components/.

The easiest way to create a component is with WP-CLI:

Sage also ships with some examples.

You can also create inline and anonymous components, which forgo the template or class respectively. These would need to be created manually (the WP-CLI command only creates "traditional" components).

Usage

A Component in action in a Blade template will look something like this:

The template for that Component might look like this:

In turn, the class might look like this:

Argument and attribute names

The names of the arguments in the definition of your Component's __construct() method must match the names of the attributes you use to pass data to your Component tag.

Note

Component constructor arguments should be specified using camelCase, while kebab-case should be used when referencing the argument names in your HTML attributes. Laravel documentation

In the above example

will work, but

will throw an error.

The attributes used to pass data to your Component tag can be in any order, so long as the names are correct:

These are equivalent.

Passing data

By default, anything passed to an attribute on a Component tag will be treated as a string. So if you do this:

Your component will treat that as a string containing $variable, not whatever the contents of $variable is.

If you need to pass non-string data, just prefix your attribute with a colon, and its value will be evaluated as PHP:

Note

Because your argument is now evaluated as PHP, you don't want to pass a simple string, or PHP will try and evaluate it: html <x-example-component :title="Uh oh"/> This will throw an error when it tries to evaluate Uh oh as PHP.

Data in views

The view for your Component (in the above example, /resources/views/components/example-component.blade.php) does not receive the arguments you pass to the Component tag; The data it has access to is limited to any public properties you've set on your class.

So remember to set those properties, or your view won't have the data you need!

Other attributes

In the Component tag, you use attributes to pass data to your component, but you can also add other, arbitrary attributes as well. These attributes will be put in an "attribute bag" which you can then access in your Component view with the special $attributes variable. If you echo the variable it will print out each attribute and its value, which is very useful for things like passing CSS selectors to your Components:

You can do many other things with attributes that are described in the Laravel documentation.

Contributors

Last updated

Support Roots

Help us continue to build and maintain our open source projects. We’re a small team of independent developers and every little bit helps.

Sponsor Roots on GitHub