PHPackages                             fabriziocaldarelli/yii2-vueapp - 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. fabriziocaldarelli/yii2-vueapp

ActiveYii2-extension[Utility & Helpers](/categories/utility)

fabriziocaldarelli/yii2-vueapp
==============================

A Vue.js helper for create Vue app in Yii2 without webpack or similar

1.0.1(5y ago)51609↓83.3%4BSD-3-ClausePHPCI failing

Since Dec 11Pushed 5y ago6 watchersCompare

[ Source](https://github.com/FabrizioCaldarelli/yii2-vueapp)[ Packagist](https://packagist.org/packages/fabriziocaldarelli/yii2-vueapp)[ RSS](/packages/fabriziocaldarelli-yii2-vueapp/feed)WikiDiscussions master Synced yesterday

READMEChangelog (2)Dependencies (4)Versions (5)Used By (0)

Vue.js helper for Yii2
======================

[](#vuejs-helper-for-yii2)

[![Latest Stable Version](https://camo.githubusercontent.com/cecba9faa01db17daebcdb1493e713a09e21530feaefc7977fe7bc0d37635684/68747470733a2f2f706f7365722e707567782e6f72672f66616272697a696f63616c646172656c6c692f796969322d7675656170702f762f737461626c65)](https://packagist.org/packages/fabriziocaldarelli/yii2-vueapp)[![Total Downloads](https://camo.githubusercontent.com/c784d9ee959074ebccd7372ab87443a274e58d687544837d23ca4d1e91607abd/68747470733a2f2f706f7365722e707567782e6f72672f66616272697a696f63616c646172656c6c692f796969322d7675656170702f646f776e6c6f616473)](https://packagist.org/packages/fabriziocaldarelli/yii2-vueapp)[![Build Status](https://camo.githubusercontent.com/6c2f4bbb4248b854ecfe5a6dce257598dc126c7644af3a63d7781eb09141d33d/68747470733a2f2f7472617669732d63692e6f72672f46616272697a696f43616c646172656c6c692f796969322d7675656170702e7376673f6272616e63683d6d6173746572)](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
------------

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

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

[](#usage)

**1) The view file**

Inside the view, call VueApp widget:

```

    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') }}