Guides: Adding custom components

Go in the components.js file and paste this code:

// TODO: show how to register the custom vue components

Next, you will have to add this line in the 'scripts' array of the config/hiker.php file of your app:

'scripts' => [
    // All your other scripts
    'path-to-the-compiled-file/components.js',
],

While you're there, you might want to add any custom css file you would like to use for your components to the styles array:

'styles' => [
    // All your other css files
    'path-to-the-file/name-of-your-file.css',
],

Note: The root of the files referenced in the arrays of the config is the public/ directory of your laravel app.

Your custom components will need 2 files, your-component.php and your-component.vue.

The php file

The PHP file is used to instantiate the component.

In it, you will need to have 1 thing:

• A $component property that contains the name of the associated vue file. It's defined like so:

protected static $component = 'component-vue-name';

Any property you define as public will automatically be sent to the front-end, which means it will be json serialized and injected into your Vue component in the component prop.

public string $property_1;
public int $property_2;

When we create components, we like to add methods that allow chaining to help us set the different properties. They are defined like so:

public function property_1(string $property_1): static
{
    $this->property_1 = $property_1;

    return $this;
}

public function property_2(int $property_2): static
{
    $this->property_2 = $property_2;

    return $this;
}

These methods allow us to do things like this:

CustomComponent::make()->property_1('example')->property_2(42);

Another thing you can do, is create a __construct function like this:

public function __construct(string $property_1 = null, int $property_2 = null)
{
    parent::__construct();

    $this->property_1($property_1);
    $this->property_2($property_2);
}

This then allows you to create the component like this:

CustomComponent::make('example', 42);

Here's an example PHP file for a Title component. Keep in mind that this is a really simple example and that your own components can get much more complex than that.

<?php

namespace Components\Title;

use Hiker\Views\Component;

class Title extends Component
{
    /**
     * The component's vue name
     */
    protected static string $component = 'title';

    /**
     * The value of the title
     */
    public string $value;

    /**
     * Create the component
     */
    public function __construct(string $value = null)
    {
        parent::__construct();

        $this->title($value);
    }

    /**
     * Set the value of the title
     */
    public function title(string $value): static
    {
        $this->value = $value;

        return $this;
    }
}

The vue file

When It comes to the vue file, you are pretty much free to do whatever you want.

In order to access the properties defined in the PHP class, you will need to add these lines to the <script/> tag of your file.

export default {
    props: ['component'],
}

For the sake of completeness, here's what the code of our example Title component looks like:

<template>
	<p class="title-section" v-html="component.value"></p>
</template>

<script>
    export default {
        props: ['component'],
	}
</script>

You should now be all set to use your component in your app !