Include Vue

Phoenix includes vue.js 2.0 and some official vue plugins to help you build a modern single page application.


Now you can easily use vue in your HTML page:

<!-- In <form id="admin-form"> -->

    <input name="foo" type="text" v-model="foo">

    new Vue({
        el: '#admin-form',
        data: {
            foo: 'bar'

Or integrate with jQuery:


    // Run after dom ready
    jQuery(function ($) {
        new Vue({
            el: '#admin-form',
            data: {
                foo: 'bar'

<input name="foo" type="text" v-model="foo">

Create a Vue Instance in PHP

    ['item' => null],
        'methods' => [
            'addItem' => "\\function () { ... }"

This will generate JS code looks like:

<script> = new Vue({el:"#app",data:{item:null},methods:{addItem:function () { ... }}});

Add PHP Variable to Vue Instance

See Phoenix Core: Variable Storage

You can use php code:

PhoenixScript::store('item', $data);

To inject data to Vue:

new Vue({
    el: '#app',
    data: {
        item: Phoenix.Store.item

Vue Animate

Use vue2-animate package to add transition effects by animate.css.

// Include JS file

Now you can add transition name to your template:

<transition-group name="fadeLeft" tag="ul">
    <li v-for="item in items" v-bind:key="item">
        {{ item }}

See vue2-animate and Vue.js Transitions

Integrate with Form Builder

Use attr(), controlAttr() and labelAttr() to directly add directives to input HTML.

This is an example to show how to bind alias input with title input.

// In Form Definition class

VueScript::instance('#admin-form', ['title' => null, 'alias' => null], ['watch' => [
    'title' => "\\function () {
        this.alias = this.title.toLowerCase().replace(/[\\s+]/g, '-');

// Title
    ->attr('v-model', 'title');

// Alias
    ->controlAttr('v-if', 'title')
    ->controlAttr('transition', 'fade')
    ->attr(':value', 'alias');


Vue Router

Use Vue router to handle page switch without refresh browser:


<div id="app">
    <h1>Hello App!</h1>
        <a v-link="{ path: '/foo' }">Go to Foo</a>
        <a v-link="{ path: '/bar' }">Go to Bar</a>

    var Foo = Vue.extend({
        template: '<p>This is foo!</p>'

    var Bar = Vue.extend({
        template: '<p>This is bar!</p>'

    var App = Vue.extend({})

    var router = new VueRouter(){
        '/foo': {
            component: Foo
        '/bar': {
            component: Bar

    router.start(App, '#app')

See Vue Router

Vue Resource

Use vue resource to fetch server data by ajax:


// global Vue object
Vue.http.get('/flower/sakura', [options]).then(successCallback, errorCallback);'/flower/sakura', [body], [options]).then(successCallback, errorCallback);

// in a Vue instance
new Vue({
    ready() {
        // GET
        this.$http.get('/flower/sakura').then((response) => {
            // success callback
        }, (response) => {
            // error callback

Add custom options and global headers:

\Phoenix\Script\VueScript::resource(['root' => $uri->path], [
    'common' => ['X-Foo' => 'Bar'],
    'post' => ['X-Baz' => 'Yoo'],

See Vue Resource


Use VueStrap to integrate Bootstrap:


See VueStrap


Vuex is an application architecture for centralized state management in Vue.js applications.


// Add initial state

    'state' => ['count' => 0],
    'mutations' => [
        'INCREMENT' => '\\function (state) { state.count++ }'


export default new Vuex.Store({

See Vuex

If you found a typo or error, please help us improve this document.