PHPackages                             phpmv/php-vuejs - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. phpmv/php-vuejs

ActiveLibrary[Utility & Helpers](/categories/utility)

phpmv/php-vuejs
===============

VueJS integration for PHP frameworks

336[4 issues](https://github.com/phpMv/php-vuejs/issues)PHP

Since Jun 21Pushed 4y ago3 watchersCompare

[ Source](https://github.com/phpMv/php-vuejs)[ Packagist](https://packagist.org/packages/phpmv/php-vuejs)[ RSS](/packages/phpmv-php-vuejs/feed)WikiDiscussions main Synced 6d ago

READMEChangelogDependenciesVersions (1)Used By (0)

PHP-VueJS
=========

[](#php-vuejs)

[![Scrutinizer Code Quality](https://camo.githubusercontent.com/a7e74c6ceeab2c77381e4be310608608b308074a6c92043ad319528bdeb24e99/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f7068704d762f7068702d7675656a732f6261646765732f7175616c6974792d73636f72652e706e673f623d6d61696e)](https://scrutinizer-ci.com/g/phpMv/php-vuejs/?branch=main) [![Code Coverage](https://camo.githubusercontent.com/acf2cd05057fbafb87f67f27eb9bee843a9465c331e00b07397b1477b0c2cdaa/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f7068704d762f7068702d7675656a732f6261646765732f636f7665726167652e706e673f623d6d61696e)](https://scrutinizer-ci.com/g/phpMv/php-vuejs/?branch=main) [![Build Status](https://camo.githubusercontent.com/673f25ef4e668196e513b8b3b6f66e1ce7a3790c70be3900b157e695bf671c6e/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f7068704d762f7068702d7675656a732f6261646765732f6275696c642e706e673f623d6d61696e)](https://scrutinizer-ci.com/g/phpMv/php-vuejs/build-status/main) [![Code Intelligence Status](https://camo.githubusercontent.com/f23ad4519b3eb8bc764f0f04e239e58d0c052b7b7089ea391c1044e7ae631ff1/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f7068704d762f7068702d7675656a732f6261646765732f636f64652d696e74656c6c6967656e63652e7376673f623d6d61696e)](https://scrutinizer-ci.com/code-intelligence)
VueJS integration for PHP frameworks `PHP-VueJS` adds `VueJS` to any `PHP` projects, it could be native, or even `PHP Framework` projects

📍 Get started
=============

[](#round_pushpin-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
=======

[](#closed_book-guide)

Creation of Vue Manager
-----------------------

[](#creation-of-vue-manager)

It manages the whole script injected , you must instantiate it

```
$vueManager = VueManager::getInstance();
```

VueManager methods

- [addGlobalDirective](#global-directives)
- [addGlobalFilter](#global-filters)
- [addGlobalExtend](#global-extends)
- [addGlobalMixin](#global-mixins)
- [addGlobalObservable](#global-observables)
- [addGlobalComponent](#global-components)
- [importComponentObject](#local-components)
- [setAxios](#axios)
- [addVue](#)

Creation of Vue object
----------------------

[](#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](https://vuetifyjs.com/en/) = false **\[optionnal\]**

VueJS methods

- [addData](#object-data)
- [addDataRaw](#object-data)
- [addMethod](#object-methods)
- [addComputed](#object-computeds)
- [addWatcher](#object-watchers)
- [addDirective](#object-directives)
- [addFilter](#object-filters)
- [addComponent](#vue-components)
- [addMixin](#object-mixins)
- [addHook](#object-hooks)

Creation of Component Object
----------------------------

[](#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](#add-props)
- [setInheritAttrs](#set-inherit-attributes)
- [setModel](#set-model)
- [addData](#object-data)
- [extends](#extends)
- [addDataRaw](#object-data)
- [addMethod](#object-methods)
- [addComputed](#object-computeds)
- [addWatcher](#object-watchers)
- [addDirective](#object-directives)
- [addFilter](#object-filters)
- [addComponent](#vue-components)
- [addMixin](#object-mixins)
- [addTemplate](#add-template)
- [generateFile](#generate-file)
- [addHook](#object-hooks)

### Object Data

[](#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-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-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-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

[](#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

[](#directives)

addDirective, addGlobalDirective arguments

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

#### Object Directives

[](#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

[](#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

[](#filters)

addFilter, addGlobalFilter arguments

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

#### Object Filters

[](#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

[](#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

[](#components)

addComponent, addGlobalComponent, importComponentObject arguments

1. (VueJSComponent) component object

#### Vue Components

[](#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

[](#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

[](#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

[](#mixins)

addMixin, addGlobalMixin argument

1. (VueJSComponent) mixin object

#### Object Mixins

[](#object-mixins)

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

This generates the content below

```
mixins: [ MixinOne ]
```

#### Global Mixins

[](#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

[](#extends)

addGlobalExtend, extends argument

1. (VueJSComponent) extend object

#### Component extends

[](#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

[](#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

[](#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
-------------

[](#configuration)

### VueManager Configuration

[](#vuemanager-configuration)

#### Axios

[](#axios)

To enable axios

```
$vueManager->setAxios(true);
```

### Components Configuration

[](#components-configuration)

#### Set Inherit Attributes

[](#set-inherit-attributes)

To enable setInheritAttrs

```
$component->setInheritAttrs(true);
```

#### Set Model

[](#set-model)

setModel arguments

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

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

Adding Vue Object
-----------------

[](#adding-vue-object)

addVue argument

1. (VueJS) object vue

```
$vueManager->addVue($vue);
```

###  Health Score

14

—

LowBetter than 2% of packages

Maintenance0

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity29

Early-stage or recently created project

 Bus Factor1

Top contributor holds 79.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/2511052?v=4)[Jean-Christophe HERON](/maintainers/jcheron)[@jcheron](https://github.com/jcheron)

---

Top Contributors

[![jguillaumesio](https://avatars.githubusercontent.com/u/62891175?v=4)](https://github.com/jguillaumesio "jguillaumesio (121 commits)")[![jcheron](https://avatars.githubusercontent.com/u/2511052?v=4)](https://github.com/jcheron "jcheron (29 commits)")[![qgorak](https://avatars.githubusercontent.com/u/58226291?v=4)](https://github.com/qgorak "qgorak (3 commits)")

---

Tags

javascriptphpphp-frameworkphp-libraryvuejs

### Embed Badge

![Health badge](/badges/phpmv-php-vuejs/health.svg)

```
[![Health](https://phpackages.com/badges/phpmv-php-vuejs/health.svg)](https://phpackages.com/packages/phpmv-php-vuejs)
```

###  Alternatives

[yannickl88/features-bundle

Symfony bundle for managing feature tags

1985.5k](/packages/yannickl88-features-bundle)[paragonie/quill

Library for quickly and easily writing data to a Chronicle instance

2125.1k1](/packages/paragonie-quill)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)