phpMv/php-vuejs

VueJS integration for PHP projects

PHP-VueJS

VueJS integration for PHP frameworks PHP-VueJS adds VueJS to any PHP projects, it could be native, or even PHP Framework projects

📍 Get started

The recommended way to use this library is using Composer, run this command from the directory where is located composer.json

composer require phpmv/php-vuejs

📕 Guide

Creation of Vue Manager

It manages the whole script injected , you must instantiate it

$vueManager = VueManager::getInstance();

VueManager methods

• addGlobalDirective
• addGlobalFilter
• addGlobalExtend
• addGlobalMixin
• addGlobalObservable
• addGlobalComponent
• importComponentObject
• setAxios
• addVue

Creation of Vue object

$vue = new VueJs();

VueJS arguments

1. (associative array) configuration = ["el" => "#app"] [optionnal]
2. (string) variable name = "app" [optionnal]
3. (boolean) enable vuetify = false [optionnal]

VueJS methods

• addData
• addDataRaw
• addMethod
• addComputed
• addWatcher
• addDirective
• addFilter
• addComponent
• addMixin
• addHook

Creation of Component Object

$component = new VueJSComponent('component-one');

VueJSComponent argument's

1. (string) name
2. (string) variable name = null [optionnal]

Component name must respect kebab-case principle, if you don't provide a variable name, it would be name converted to PascalCase

VueJSComponent methods

• addProps
• setInheritAttrs
• setModel
• addData
• extends
• addDataRaw
• addMethod
• addComputed
• addWatcher
• addDirective
• addFilter
• addComponent
• addMixin
• addTemplate
• generateFile
• addHook

Object Data

$object->addData('name',true);
$object->addDataRaw('name','true');

addData, addDataRaw arguments

1. (string) name
2. (string) value

These two lines of code generate exactly the same Vue data

data: { "name": true }

Object Methods

$object->addMethod('greet','window.alert(`Hello ${name}`);',['name']);

addMethod arguments

1. (string) name
2. (string) function's body
3. (array) function's argument(s) [optionnal]

This will generate the content below

methods: {
	"greet":
		function(name){
			window.alert(`Hello ${name}`);
		}
}

Object Computeds

$object->addComputed('reversedMessage',"return this.message.split('').reverse().join('');");

addComputed arguments

1. (string) name
2. (string) get function's body
3. (string) set function's body by default the function argument is v [optionnal]

This will generate the content below

computeds: {
	reversedMessage:
		function(){
			return this.message.split('').reverse().join('');
		}
}

Here is an example with getter and setter

$object->addComputed(
	'fullName',
	"return this.firstName+' '+this.lastName",
	"this.firstName=v[0];this.lastName=v[1]");

This code generates this content

computeds: {
	fullName: {
		get: function(){
			return this.firstName+' '+this.lastName
		},
		set: function(v){
			this.firstName=v[0];
			this.lastName=v[1]
		}
	}
}

Object Watchers

$object->addWatcher(
	"title",
	"console.log('Title change from '+ oldTitle +' to '+ newTitle)",
	['newTitle','oldTitle']);

addWatcher arguments

1. (string) data to watch
2. (string) function body
3. (array) function argument(s) [optionnal]

This generates the content below

watch: {
	"title":
		function(newTitle,oldTitle){
			console.log('Title change from '+ oldTitle +' to '+ newTitle)
		}
}

Object Hooks

These are all the methods available to run a function at a given lifecycle

• onBeforeCreate
• onCreated
• onBeforeMount
• onMounted
• onBeforeUpdate
• onUpdated
• onBeforeDestroy
• onDestroyed
• onActivated
• onDeactivated

All hooks work in the same way, the underneath example can be applied for each hooks

hooks arguments

1. (string) function's body

$object->onCreated("console.log('Page has been created !');");

This generates the content below

created:
	function(){
		console.log('Page has been created !');
	}

Directives

addDirective, addGlobalDirective arguments

1. (string) directive's name
2. (associative array) [hook => hook's function]

Object Directives

$object->addDirective('focus',['inserted'=>"el.focus()"]);

This generates the content below

directives: {
	focus: {
		inserted:
			function(el,binding,vnode,oldVnode){
				el.focus()
			}
	}
}

Global directives

$vueManager->addGlobalDirective('focus',['inserted'=>"el.focus()"]);

This generates the content below

Vue.directive('focus',{
	inserted:
		function(el,binding,vnode,oldVnode){
			el.focus()
		}
	});

Filters

addFilter, addGlobalFilter arguments

1. (string) name
2. (string) function body
3. (array) function arguments [optionnal]

Object Filters

$object->addFilter(
	'capitalize',   
	"if(!value){"
		."return '';"
	."}"
	."value = value.toString();"  
	."return value.charAt(0).toUpperCase() + value.slice(1);",  
	["value"]);

This generates the content below

filters: {
	capitalize: function(value){
		if(!value){return '';}
		value = value.toString();
		return value.charAt(0).toUpperCase() + value.slice(1);
	}
}

Global Filters

$vueManager->addGlobalFilter(
	'capitalize',   
	"if(!value){"
		."return '';"
	."}"
	."value = value.toString();"  
	."return value.charAt(0).toUpperCase() + value.slice(1);",  
	["value"]);

This generates the content below

Vue.filter('capitalize',
	function(value){
		if(!value){return '';}
		value = value.toString();
		return value.charAt(0).toUpperCase() + value.slice(1);
	});

Components

addComponent, addGlobalComponent, importComponentObject arguments

1. (VueJSComponent) component object

Vue Components

$component = new VueJSComponent('component-one');
$component->addData('framework','ubiquity');
$vue->addComponent($component);

This generates the content below

components: { "component-one": ComponentOne }

Local Components

$component = new VueJSComponent('component-one');
$component->addData('framework','ubiquity');
$vueManager->importComponentObject($component);

This generates the content below

const ComponentOne = {
	data:
		function(){
			return {framework: "ubiquity"}
		}
	};

Global Components

$component = new VueJSComponent('component-one');
$component->addData('framework','ubiquity');
$vueManager->addGlobalComponent($component);

This generates the content below

Vue.component('component-one',{
	data:
		function(){
			return {framework: "ubiquity"}
		}
	});

Mixins

addMixin, addGlobalMixin argument

1. (VueJSComponent) mixin object

Object Mixins

$mixin = new VueJSComponent('mixin-one');
$mixin->addData('framework','ubiquity');
$vue->addMixin($mixin);

This generates the content below

mixins: [ MixinOne ]

Global Mixins

$mixin = new VueJSComponent('mixin-one');
$mixin->addData('framework','ubiquity');
$vueManager->addGlobalMixin($mixin);

This generates the content below

Vue.mixin({
	data: 
		function(){
			return {framework: "ubiquity"}
		}
	});

Extends

addGlobalExtend, extends argument

1. (VueJSComponent) extend object

Component extends

$component = new VueJSComponent('component');
$componentOne = new VueJSComponent('component-one');  
$componentOne->addData('framework','ubiquity');
$componentOne->extends($component);
$vueManager->addGlobalComponent($componentOne);

This generates the content below

extends: "Component"

Global Extends

$extend = new VueJSComponent('extend-one');
$extend->addData('framework','ubiquity');
$vueManager->addGlobalMixin($extend);

This generates the content below

Vue.extend({
	data:
		function(){
			return {framework: "ubiquity"}
		}
	});

Global Observables

addGlobalObservable arguments

1. (string) variable name
2. (array) object

$vueManager->addGlobalObservable("state", ["count" => 0]);

This generates the content below

const state = Vue.observable({count: 0});

Configuration

VueManager Configuration

Axios

To enable axios

$vueManager->setAxios(true);

Components Configuration

Set Inherit Attributes

To enable setInheritAttrs

$component->setInheritAttrs(true);

Set Model

setModel arguments

1. (string) props
2. (string) events

$component->setModel('checked', 'change');

Adding Vue Object

addVue argument

1. (VueJS) object vue

$vueManager->addVue($vue);