# Vue Generator
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 tagarray $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 attributestring $value
The value of the attributebool $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 aVueCollection
.
# 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 attributemixed $value
The value of the attributebool $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 ofRenderable
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();