phpmv / php-vuejs
VueJS integration for PHP frameworks
Requires
- php: >=7.4
- phpmv/php-ajax: dev-main
- phpmv/php-ui-common: dev-main
Requires (Dev)
- codeception/codeception: ^4.1
- codeception/module-asserts: ^1.0.0
This package is auto-updated.
Last update: 2024-09-22 03:08:53 UTC
README
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
- (associative array) configuration = ["el" => "#app"] [optionnal]
- (string) variable name = "app" [optionnal]
- (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
- (string) name
- (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
- (string) name
- (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
- (string) name
- (string) function's body
- (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
- (string) name
- (string) get function's body
- (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
- (string) data to watch
- (string) function body
- (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
- (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
- (string) directive's name
- (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
- (string) name
- (string) function body
- (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
- (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
- (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
- (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
- (string) variable name
- (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
- (string) props
- (string) events
$component->setModel('checked', 'change');
Adding Vue Object
addVue argument
- (VueJS) object vue
$vueManager->addVue($vue);