antkaz/yii2-vue

The Vue.js extension for the Yii framework

Installs: 12 229

Dependents: 1

Suggesters: 0

Security: 0

Stars: 19

Watchers: 1

Forks: 12

Open Issues: 0

Type:yii2-extension

v1.0 2018-03-01 19:37 UTC

This package is auto-updated.

Last update: 2021-07-08 11:48:32 UTC


README

68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67

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>