phpmv/php-vuejs

VueJS integration for PHP frameworks

dev-main 2021-06-21 19:57 UTC

This package is auto-updated.

Last update: 2022-05-21 22:11:28 UTC


README

Scrutinizer Code Quality Code Coverage Build Status Code Intelligence Status
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

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

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

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);