PHPackages                             sablesoft/yii2-vue - 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. [Framework](/categories/framework)
4. /
5. sablesoft/yii2-vue

ActiveYii2-extension[Framework](/categories/framework)

sablesoft/yii2-vue
==================

Vue.js manager component for yii2 web application

v1.0(7y ago)2301LGPL-3.0+PHP

Since Jan 20Pushed 7y ago2 watchersCompare

[ Source](https://github.com/sablesoft/yii2-vue)[ Packagist](https://packagist.org/packages/sablesoft/yii2-vue)[ RSS](/packages/sablesoft-yii2-vue/feed)WikiDiscussions master Synced today

READMEChangelogDependencies (4)Versions (2)Used By (1)

Yii2 Vue.js Manager
===================

[](#yii2-vuejs-manager)

This is the component for the yii2 app. This is the component for the application. It is a manager that allows you to conveniently manage settings and rendering of [Vue.js](https://vuejs.org/).

Installation
------------

[](#installation)

The preferred way to install the **vueManager** is through [composer](http://getcomposer.org/download/).

Either run

```
composer require sablesoft/yii2-vue

```

or add

```
"sablesoft/yii2-vue": "*",
```

to the require section of your composer.json.

Then add **vueManager** in your app config:

```
    ...
    'components' => [
        ...
        'vueManager'   => [
            'class'      => 'sablesoft\vue\VueManager',
            'delimiters' => [ '[[', ']]' ],  // specify custom for smarty
            'isDev'      => true              // false is default
        ],
        ...
    ],
```

How to Use
----------

[](#how-to-use)

Just use **vueManager**::**register** method in your controller before rendering:

```
    Yii::$app->vueManager->register([

        'type' => 'instance',  // is default, use 'component' type
                               // to register vue component

        // html element id (for vue class instance):
        'id' => 'buy-number',

        // vue class instance var name:
        'jsName'  => 'buyNumber',

        // path to your vue app sources ( see details below ):
        'sourcePath'    => '@yourAlias/path/to/vueApp/sources',

        // your vue app reactive data:
        'data' => [
           'routes'  => $yourRoutes,
           'flags'   => $someCustomFlags,
           'model'   => $yourModel->getAttributes(),
           ...
        ],

        // use jsExpression wrapper for short js
        // for long js use sourcePath ( see below ):
        'created' =>
            new JsExpression( "function() { console.log('Vue created!')}" ),

        // also you can use string value as path to your js:
        'computed' => '@yourAlias/path/to/computed.js',

        // for vue 'component' type:
        'props' => [...],
        'template' => '...'

    ]);
```

Vue Source Path
---------------

[](#vue-source-path)

Use sorcePath for simple development and maintenance of complex vue apps and components. Just put all your js files for your vue app in one place. For example:

```
    -app\
        ...
        views\

            // your controller views:
            hello\

                // source path to vue - @app/views/hello/index
                index\

                    // use 'components' directory for required components:
                    components\

                        // subdirectory name - is component tag
                        compA\
                            props.js
                            template.html
                        compB\
                            props.js
                            template.html
                         ...
                    // your vue app or component fields:
                    computed.js
                    methods.js
                    created.js

                // your action view:
                index.tpl

```

Source JS Syntax
----------------

[](#source-js-syntax)

JS files in your sourcePath must have a specific syntax. For js objects use this wrappers:

```
    (function(){
        return {
            fieldA : 'fieldValue',
            fieldB : function(){...},
            ...
        }
    })();
```

For single functions as 'created', 'mounted' and similar you can use the usual syntax:

```
    function created() {
        console.log('Vue app created!');
    }
```

And don't forget for vue chrome extension! :)

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity10

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity60

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

2669d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/6d9b0f205c28816c7412e64ffc94536e0c7e796bcf1b2066caea1c6167cb2c0f?d=identicon)[sablesoft](/maintainers/sablesoft)

---

Top Contributors

[![sablesoft](https://avatars.githubusercontent.com/u/13505325?v=4)](https://github.com/sablesoft "sablesoft (6 commits)")

---

Tags

yii2vueVue.jslodashaxiosyii2-vuesablesoft

### Embed Badge

![Health badge](/badges/sablesoft-yii2-vue/health.svg)

```
[![Health](https://phpackages.com/badges/sablesoft-yii2-vue/health.svg)](https://phpackages.com/packages/sablesoft-yii2-vue)
```

###  Alternatives

[colee/yii2-vue

Vue.js library for Yii2 framework

1241.2k1](/packages/colee-yii2-vue)[aki/yii2-vue

for yii2 web application

7010.1k1](/packages/aki-yii2-vue)[skeeks/cms

SkeekS CMS — control panel and tools based on php framework Yii2

13825.6k47](/packages/skeeks-cms)[kompo/kompo

Laravel & Vue.js FullStack Components for Rapid Application Development

11812.4k21](/packages/kompo-kompo)[titasgailius/laravel-moonlight

An elegant Laravel scaffolding for your next single-page application.

1446.6k](/packages/titasgailius-laravel-moonlight)[aki/yii2-app-vue

Yii 2 Basic Project Template width VueJs

151.3k](/packages/aki-yii2-app-vue)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)