# [Sage 10] How to use and create a component - Like, for example /app/View/Components/Alert.php

**URL:** https://discourse.roots.io/t/sage-10-how-to-use-and-create-a-component-like-for-example-app-view-components-alert-php/20113
**Category:** sage
**Tags:** sage10
**Created:** 2021-02-18T16:01:33Z
**Posts:** 13

## Post 1 by @Tim — 2021-02-18T16:01:33Z

Hey all,

I was tinkering with making a custom component for product images. This should process some arguments. If I look at the file `/app/View/Components/Alert.php` I get the feeling that this is something I could use as a boilerplate.

From what I understand you can call it and pass 2 arguments, `$type` and `message`, then it grabs the view from `components.alert` and renders it.

The thing is that I don’t know how to call this `Alert` component and pass arguments from, for example, `/resources/views./page.blade.php`.

How would I accomplish this?

---

## Post 2 by @Tim — 2021-02-18T16:20:06Z

It’s always like this. You’re stuck for over a day, post a question and find the answer… `<x-alert />`  
But then I copy the `Alert.php` files and rename the class to `ProductImage` And it does not render with `<x-productimage />` I did a `composer dump-autoload` but no go.

---

## Post 3 by @alwaysblank — 2021-02-18T21:29:11Z

The Blade documentation is a good place to start: [https://laravel.com/docs/7.x/blade#components](https://laravel.com/docs/7.x/blade#components)

I think the Acorn WP-CLI command also has a command to help you create components. If you run `wp acorn` it’ll list the available commands.

---

## Post 4 by @Tim — 2021-02-19T08:27:19Z

@alwaysblank. Thanks Ben, that gave all the missing info I needed.

One thing though. Even though I got it working a Sage 10 project folder is not able to call `php artisan make:component Alert` It has no `artisan`.

Acorn has `wp acorn make:component myName` It prints `Component created successfully`. But there is no trace of this newly created component. Not in the `app/` and the `resources/views/` folder. Not even id I search project wide for this name in camelCasing or kebab-casing. So where would it live.

If I re-run the command it says it already exists. Plus is there documentation on Acorn? It might give me hints on how to work with components. But I don’t see documentation on it.

Lately. I managed to create it manually by cloning the `/app/View/Components/Alert.php` Rename the file, class and view render in the return. Then create a custom view component in the `/resources/views/components`

---

## Post 5 by @alwaysblank — 2021-02-19T16:59:34Z

Running `wp acorn make:component TestComponent` results in creating two files:

- `app/View/Components/TestComponent.php`
- `resources/views/components/test-component.blade.php`

I did the above on a Sage 10 site I’m working on, and got the above result.

If you’re trying to find files that have been created by an automated process, a good way to do that is to run `git status`: So long as you’ve been keeping up with your commits, it will clearly show the files that have just been added.

---

## Post 6 by @Tim — 2021-02-19T18:28:47Z

Son of a gun… I stand corrected. You are right, I’m sorry. I had two terminals open one for the parent theme and one for the child theme. Looks like I was working in the other terminal than expected. I found the files, yes. Thanks Ben, this makes it all a lot easier :slight_smile:

---

## Post 7 by @AurelianSpodarec — 2021-03-21T12:51:55Z

I can’t seem to get this working. Get this error:

> Problem 1  
> - Root composer.json requires roots/acorn ^1.1 → satisfiable by roots/acorn[v1.1.0].  
> - roots/acorn v1.1.0 requires illuminate/cache ^7.0 → found illuminate/cache[v7.0.0, …, 7.x-dev] but the package is fixed to v8.27.0 (lock file version) by a partial update and that version does not match. Make sure you list it as an argument for the update command.
> 
> Use the option --with-all-dependencies (-W) to allow upgrades, downgrades and removals for packages currently locked to specific versions.

---

## Post 8 by @AurelianSpodarec — 2021-03-21T13:01:20Z

Tim, do you want to collaborate on a system together perhaps? We can share ideas and such, I’m also using TailwindCSS. Perhaps via discord if you want?

---

## Post 9 by @MWDelaney — 2021-03-21T17:39:54Z

Wait really? Wow. We need Acorn docs so badly :wink:

---

## Post 10 by @Tim — 2021-03-21T18:00:56Z

I came to the conclusion acorn has troubles with multiple Sage themes in the wp themes folder. This is the main reason I didn’t got it to work. It saw two sage themes and asked me about 8 times which theme I wanted to install the component in. Selecting each time the right theme still did not help. It installed one of two files in the one theme and one file in the other theme. Another time it just kept installing it in the wrong theme. This is why it did not show up in my git status.

---

## Post 11 by @Tim — 2021-03-21T18:05:43Z

I’m sorry @AurelianSpodarec I don’t think I’ll be the right person for a collab :slight_smile: I’m not very experienced. Plus for me the components in sage 10 just worked (after the frustration mentioned above). If you don’t get acorn to work you can still manually place the files in those directories without acorn. Take a look at the preinstalled `Alert` components and copy/paste it to make your own.

---

## Post 12 by @AurelianSpodarec — 2021-03-22T01:07:13Z

I’m not that experienced either, but we all have different ideas that can make the workflow better :slight_smile:

Yeah, I did that, ended up creating this for my button, if you’re curious:

```
<?php

namespace App\View\Components;

use Roots\Acorn\View\Component;

class Button extends Component
{

    // TODO: Add error handling

    public $buttonVariant;
    public $buttonKind;
    public $buttonRadius;
    public $buttonSize;

    public $message;

    public $variant = [
        'primary' => 'button-primary',
        'secondary' => 'button-secondary',
        'teritary' => 'button-teritary',
        'success' => 'button-success',
        'warning' => 'button-warning',
        'danger' => 'button-danger',
        'info' => 'button-info',
        'white' => 'button-white',
    ];

    public $kind = [
        'solid' => 'button-solid',
        'outline' => 'button-outline',
        'clear' => 'button-clear',
    ];

    public $radius = [
        'none' => 'button-radius-none',
        'small' => 'button-radius-small',
        'medium' => 'button-radius-black',
        'large' => 'button-radius-black',
        'full' => 'button-radius-full',
    ];

    public $size = [
        'sm' => 'button-sm',
        'medium' => 'button-medium',
        'large' => 'button-large',
    ];

    public function __construct($variant = 'primary', $kind = 'solid', $radius = 'none', $size = 'medium', $message = null)
    {
        $this->buttonVariant = $this->variant[$variant] ?? $this->variant['default'];
        $this->buttonKind = $this->kind[$kind] ?? $this->kind['default'];
        $this->buttonRadius = $this->radius[$radius] ?? $this->radius['medium'];
        $this->buttonSize = $this->size[$size] ?? $this->size['medium'];

        $this->message = $message;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return $this->view('components.button');
    }
}
```

---

## Post 13 by @system — 2021-04-01T16:01:33Z

This topic was automatically closed after 42 days. New replies are no longer allowed.