Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fcaldarelli/yii2-vueapp
A Vue.js helper for create Vue app in Yii2 without webpack or similar
https://github.com/fcaldarelli/yii2-vueapp
vue vue-helper yii2
Last synced: 2 months ago
JSON representation
A Vue.js helper for create Vue app in Yii2 without webpack or similar
- Host: GitHub
- URL: https://github.com/fcaldarelli/yii2-vueapp
- Owner: fcaldarelli
- License: bsd-3-clause
- Created: 2019-08-06T23:55:01.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-05-28T10:43:33.000Z (over 4 years ago)
- Last Synced: 2024-11-06T19:52:47.752Z (2 months ago)
- Topics: vue, vue-helper, yii2
- Language: PHP
- Size: 97.7 KB
- Stars: 52
- Watchers: 7
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Vue.js helper for Yii2
=====================
[](https://packagist.org/packages/fabriziocaldarelli/yii2-vueapp)
[](https://packagist.org/packages/fabriziocaldarelli/yii2-vueapp)
[](https://travis-ci.org/FabrizioCaldarelli/yii2-vueapp)
This is a component that helps to create Vue.js app without usign webpack or similar.
All assets (js, css and templates) are injected directly in the html and this components
provides functionalities to split the code (js, css and templates) and to load parameters
from html root element.
Two default packages are embedded with this component: Axios and Moment. There is an example
that shows how use both in the code.
Installation
------------
The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
Either run
```
php composer.phar require --prefer-dist fabriziocaldarelli/yii2-vueapp "^1.0"
```
or add
```
"fabriziocaldarelli/yii2-vueapp": "^1.0"
```
to the require section of your `composer.json` file.
How it works
------------
This component injects js, css and tpl (php or html) files into the returned html.
These files are read starting from same folder of action view file, appending vueapp/*actionName*/js or vueapp/*actionName*/css or vueapp/*actionName*/tpl
VueApp::begin mainly supports three parameters:
- id: vue app html tag id selector;
- propsData: widget uses this element to pass data from html/php to js script;
- packages: list of packages that should be loaded into js vue script
**Pay attention**: *propsData* keys have the same name (and same case) in php and in js file.
Usage
-----
**1) The view file**
Inside the view, call VueApp widget:
```php
'vueAppTest',
'propsData' => [
'kParam1' => 'value_1',
'kParam2' => 'value_2',
'kParam3' => 'value_3',
'kParamObj' => ['a' => 10],
],
/*
'jsFiles' => [ ... ], // list of other js files, that have precedente over js contents path files
'cssFiles' => [ ... ], // list of other css files, that have precedente over css contents path files
'tplFiles' => [ ... ], // list of other tpl files, that have precedente over tpl contents path files
*/
'assets' => [
\sfmobile\vueapp\assets\axios\AxiosAsset::class,
\sfmobile\vueapp\assets\moment\MomentAsset::class,
\sfmobile\vueapp\assets\vue_select\VueSelectAsset::class
\sfmobile\vueapp\assets\uid\UivAsset::class
\sfmobile\vueapp\assets\vue_bootstrap_datetime_picker\VueBootstrapDatetimePickerAsset::class
]
]);
?>
kParam1: {{ propsApp.kParam1 }}
kParam2: {{ propsApp.kParam2 }}
kParam3: {{ propsApp.kParam3 }}
kParamObj: {{ propsApp.kParamObj ? propsApp.kParamObj.a : null }}
clock datetime: {{ clock_datetime | formatDateTime('DD/MM/YYYY HH:mm') }}
becomes
// Vue Select asset - To avoid conflicts:
// Vue.component('v-select', VueSelect.VueSelect);
var ___VUEAPP_APP_ID___ = new Vue({
el: '#___VUEAPP_APP_ID___',
// If you need a date picker,
// add VueApp::PKG_VUEJS_DATEPICKER to 'packages' VueApp widget config
// Refer to https://github.com/charliekassel/vuejs-datepicker
components: {
vuejsDatepicker, // using VueJsDatePicker
"date-picker": VueBootstrapDatetimePicker, // using VueBootstrapDatetimePicker - https://github.com/ankurk91/vue-bootstrap-datetimepicker
'v-select' : VueSelect.VueSelect // using VueSelect - https://vue-select.org/guide/install.html#yarn-npm
},
data: {
/**
* propsApp is used to collect attribute related to root container element.
* This is the suggested way to pass data from php to js vue app.
* All parameter are converted from dash to camel case (html k-param-1 become kParam1)
*/
propsApp: {
kParam1: null,
kParam2: null,
kParam3: null,
kParamObj: null,
},
clock_datetime: null,
datePickerValue: null,
vueBootstrapDatetimePickerOptions: {
// https://momentjs.com/docs/#/displaying/
format: "DD/MM/YYYY HH:mm",
locale: 'it',
useCurrent: false,
showClear: true,
showClose: true
}
},
filters: {
formatDateTime: function (value, format) {
return value ? moment(value).format(format) : null
}
},
mounted() {
this.readPropsApp();
// Because kParamObj is an object, we have to parse to serialized version of kParamObj
this.propsApp.kParamObj = JSON.parse(this.propsApp.kParamObj);
this.loadAtomicClock();
},
methods: {
readPropsApp: function () {
for (var k in this.propsApp) {
// Taken from: https://github.com/sindresorhus/decamelize/blob/master/index.js
var attr = k
.replace(/([a-z\d])([A-Z])/g, '$1-$2')
.replace(/([A-Z]+)([A-Z][a-z\d]+)/g, '$1-$2')
.toLowerCase();
console.log(k, attr);
if (this.$el.attributes[attr] != undefined) {
this.propsApp[k] = this.$el.attributes[attr].value;
}
}
}
loadAtomicClock: function () {
var self = this;
axios
.get('http://worldtimeapi.org/api/ip')
.then(function (response) {
console.log(response);
self.clock_datetime = response.data.datetime;
})
.catch(error => console.log(error));
},
}
})
```
**3) The Vue app css files**
Starting from view path folder, css files for app and components are in vueapp/test/css/*actionName*/ .
For example, the path for main vue app css could be vueapp/test/css/test.css
```css
[v-cloak] {
display: none
}
```
Tips & Tricks
-----
1. Pass data from html/php to js
To pass data from html/php to js vue app, I used an attribute called propsApp, whithin are defined attributes passed in html root element.
For example, html root element "vueAppTest":
```html
...
```
all parameters defined in data.propsApp are readed from html when app is mounted (calling readPropsApp method):
```js
var vueAppTest = new Vue({
el: '#vueAppTest',
data: {
/**
* propsApp is used to collect attribute related to root container element.
* This is the suggested way to pass data from php to js vue app.
* All parameter are converted from dash to camel case (html k-param-1 become kParam1)
*/
propsApp: {
kParam1: null,
kParam2: null,
kParam3: null,
},
},
mounted() {
this.readPropsApp();
},
methods: {
readPropsApp: function () {
for (var k in this.propsApp) {
// Taken from: https://github.com/sindresorhus/decamelize/blob/master/index.js
var attr = k
.replace(/([a-z\d])([A-Z])/g, '$1-$2')
.replace(/([A-Z]+)([A-Z][a-z\d]+)/g, '$1-$2')
.toLowerCase();
console.log(k, attr);
if (this.$el.attributes[attr] != undefined) {
this.propsApp[k] = this.$el.attributes[attr].value;
}
}
},
}
}
```
2. Component registration
JS files loading order is important when the app js file depends from other js files.
So, I suggest to prefix all component files with '_' or suffix with '.component.' in order to load component js files firstly.
3. Pass object data from html/php to js
Passing objects/array from html/php to js is the same of primitive dat (Tips and triks #1).
The only different thing is that in mounted() function you need to parse json string to the object.
So, if kObject is the object passed from php, mounted() method will be:
```js
mounted() {
this.readPropsApp();
// Because kParamObj is an object, we have to parse to serialized version of kParamObj
this.propsApp.kParamObj = JSON.parse(this.propsApp.kParamObj);
},
```