# Vue Generator

GitHub

Clean up your PHP templates and create simple data objects to render your Vue components and its props.

Never do the following ever again.

<v-slider :autoplay="<?php echo ($shouldAutoplay ? 'true' : 'false'); ?>">
    <?php foreach ($sliderItems as $item): ?>
        <v-slider-item src="<?php echo $item['src']; ?>"></v-slider-item>
    <?php endforeach; ?>
</v-slider>

Instead, do this.

use mrcrmn\VueGenerator\Vue;
use mrcrmn\VueGenerator\VueCollection;

$slider = Vue::make('v-slider')->setProp('autoplay', true);

$slider->setSlot([
    Vue::make('v-slider-item')->setProp('src', 'image1.jpg'),
    Vue::make('v-slider-item')->setProp('src', 'image2.jpg'),
]);

And then in your template.

<?php echo $slider; ?>

# Installation

# Composer

To install this package run the following command in your project's root.

$ composer require mrcrmn/vue-generator

# Basic usage

# Creating a new instance

There are two ways to create a new Vue instance.

$vue = new Vue('v-item');

Or via the static method make.

$vue = Vue::make('v-item');

# Adding data to your component

After creating a new instance you can start setting props and adding data to your component.

$vue->setProp('prop-name', 'value');

Warning

As of now, the prop name is not changed to a kebab-cased format. So make sure to correctly name your props.

The prop value can be any datatype. You don't need to worry about adding v-bind to your prop name or encoding your array values as JSON. This package will automatically do that for you. So you can simply type the following and expect correct results.

$vue->setProp('object', [
    'text' => 'some text',
    'link' => '/link/to/somewhere'
]);

# Setting slots

If your component needs a slot you can simply call setSlot($slotContent) on your component instance.

$vue = Vue::make('v-link')->setSlot('Home');

echo $vue->render();

This will output the following HTML:

<v-link>Home</v-link>

# Using Renderable objects as a slot

Before rendering the slot of your component, make sure the object you want to pass in as a slot implements the mrcrmn/VueGenerator/Rederable Interface, which the Vue and VueCollection classes do. Then you can do the following.

$vue = Vue::make('v-link');
$vueInner = Vue::make('v-span')->setSlot('inner text');
$vue->setSlot($vueInner);

echo $vue->render();

This will output the following HTML:

<v-link>
    <v-span>inner text</v-span>
</v-link>

# Combining it with a VueCollection

Combine this with a VueCollection and you can generate some pretty complex HTML like in the example at the top of this page.

$slider = Vue::make('v-slider')->setProp('autoplay', true);

$slider->setSlot(new VueCollection([
    Vue::make('v-slider-item')->setProp('src', 'image1.jpg'),
    Vue::make('v-slider-item')->setProp('src', 'image2.jpg'),
]));

echo $slider->render();

This will result in the following.

<v-slider v-bind:autoplay="true">
    <v-slider-item src="image1.jpg"></v-slider-item>
    <v-slider-item src="image1.jpg"></v-slider-item>
</v-slider>

# Dynamically create Vue Objects

The static construct method, let's you pass an array representation of your HTML structure and it will automatically instantiate the Vue objects. Make sure to specify a tag in your array. Slots can be infinitely nested.

This is how you might create a navbar component.

$nav = [
    'tag' => 'v-nav',
    'slot' => [
        [
            'tag' => 'v-nav-item',
            'href' => '/home',
            'slot' => 'Home',
        ],
        [
            'tag' => 'v-nav-item',
            'href' => '/about',
            'slot' => 'About'
        ],
        [
            'tag' => 'v-social-container',
            'slot' => [
                [
                    'tag' => 'v-social-item',
                    'new-tab' => true,
                    'slot' => 'GitHub'
                ],
                [
                    'tag' => 'v-social-item',
                    'new-tab' => true,
                    'slot' => 'Twitter'
                ],
            ]
        ]
    ]
];

$vue = Vue::construct($nav);

echo $vue->render();

This will result in the following HTML.

<v-nav>
    <v-nav-item href='/home'>Home</v-nav-item>
    <v-nav-item href='/about'>About</v-nav-item>
    <v-social-container>
        <v-social-item v-bind:new-tab='true'>GitHub</v-social-item>
        <v-social-item v-bind:new-tab='true'>Twitter</v-social-item>
    </v-social-container>
</v-nav>

# API

# HtmlTag

  • Classname: mrcrmn\VueGenerator\HtmlTag
  • Implements: mrcrmn\VueGenerator\Renderable

# __construct($tag, $attributes = [])

Constructs a new instance.

  • Arguments:

    • string $tag The name of the tag
    • array $attributes The tag's attributes.

  • Usage:

    $html = new HtmlTag('div');

$html = new HtmlTag('div', [
    'id' => 'some-div'
]);

# static make()

Takes all arguments and passes them to the constructor.

  • Usage:

    $html = HtmlTag::make('div');

$html = HtmlTag::make('div', [
    'id' => 'some-div'
]);

# getTagName()

Gets the name of the tag.

  • Returns: string

  • Usage:

    $html->getTagName();

# render()

Renders the tag as HTML.

  • Returns: string

  • Usage:

    $html->render();

# setAttribute($attribute, $value, $boolean = false)

Adds an attribute and its value to the tag.

  • Arguments:

    • string $attribute The name of the attribute
    • string $value The value of the attribute
    • bool $boolean Whether or not the attribute should be added

  • Returns: $this

  • Usage:

    $html->setAttribute('id', 'home');

# setSlot($slot)

Sets the content of the tag aka. the slot.

  • Arguments:

    • string|array|Renderable $slot The slot content

  • Returns: $this

  • Usage:

    $html->setSlot('Hello World!');
// or pass a Renderable object.
$html->setSlot(HtmlTag::make('div'));

    Tip

    If you pass an array to the setSlot() method, it will automatically convert the array to a VueCollection.

# getSlot()

Gets the slot content.

  • Returns: string

  • Usage:

    $html->getSlot();

# Vue

  • Classname: mrcrmn\VueGenerator\Vue
  • Extends: mrcrmn\VueGenerator\HtmlTag
  • Implements: mrcrmn\VueGenerator\Renderable

# setProp($attribute, $value, $boolean = false)

Alias for setAttribute().

Tip

When using the Vue class instead of the HtmlTag, you can add every datatype as a prop instead of just a string.

  • Arguments:

    • string $attribute The name of the attribute
    • mixed $value The value of the attribute
    • bool $boolean Whether or not the attribute should be added

  • Returns: $this

  • Usage:

    $vue->setProp('id', [1, 2, 3]);

# static construct($array)

Dynamically constructs Vue Objects with an data object as input.

  • Arguments:

    • array $array

  • Returns: VueCollection

  • Usage:

    $nav = [
    'tag' => 'v-nav',
    'slot' => [
        [
            'tag' => 'v-link',
            'href' => '/home',
            'slot' => 'Home',
        ],
        [
            'tag' => 'v-link',
            'href' => '/about',
            'slot' => 'About'
        ]
    ]
];

$vue = Vue::construct($nav);
$vue->render();

    This will result in:

    <v-nav>
    <v-link href='/home'>Home</v-link>
    <v-link href='/about'>About</v-link>
</v-nav>

# VueCollection

  • Classname: mrcrmn\VueGenerator\VueCollection
  • Implements:
    • mrcrmn\VueGenerator\Renderable
    • ArrayAccess
    • Countable
    • Iterator

# __construct($items = [])

Constructs a new instance.

  • Arguments:

    • array $items The array of Renderable items

  • Usage:

    $collection = new VueCollection([
    new Vue('v-link'),
    new Vue('v-link')
]);

# add($vue)

Adds one or multiple Renderable items to the collection.

  • Arguments:

    • Renderable|array $vue

  • Returns: $this

  • Usage:

    $collection->add(new Vue('v-link'));
// or pass an array
$collection->add([
    new Vue('v-link'),
    new Vue('v-link')
]);

# render()

Renders all components in the collection.

  • Returns: string

  • Usage:

    $collection->render();