Vue.js Extension for Yii2

This is the Vue.js extension for Yii2.

Installation

The preferred way to install this extension is through composer.

Run

php composer.phar require antkaz/yii2-vue

or add

"antkaz/yii2-vue": "~1.0"

to the require section of your composer.json file.

Usage

After installing the extension, just use it in your code:

<?php

use antkaz\vue\Vue;
use \yii\web\JsExpression;
?>
<div class="vue">
    <?php Vue::begin([
        'clientOptions' => [
            'data' => [
                'message' => 'Hello Vue!'
            ],
            'methods' => [
                'reverseMessage' => new JsExpression("function() {this.message = this.message.split('').reverse().join('')}")
            ]
        ]
    ]) ?>

    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>

    <?php Vue::end() ?>
</div>

Alternative method without using a widget:

<?php

use antkaz\vue\VueAsset;
VueAsset::register($this); // register VueAsset
?>

<div id="app" class="vue">

    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>

</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>