PHPackages                             ether/craft-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. [Utility & Helpers](/categories/utility)
4. /
5. ether/craft-vue

ActiveYii-module[Utility & Helpers](/categories/utility)

ether/craft-vue
===============

A helper module for building Craft CMS plugins with Vue components

1101PHP

Since Oct 4Pushed 7y ago1 watchersCompare

[ Source](https://github.com/ethercreative/craft-vue)[ Packagist](https://packagist.org/packages/ether/craft-vue)[ RSS](/packages/ether-craft-vue/feed)WikiDiscussions master Synced 4d ago

READMEChangelogDependenciesVersions (1)Used By (0)

craft-vue
=========

[](#craft-vue)

A helper module for building Craft CMS plugins with Vue components.

This supports all major browsers **except** IE11.

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

[](#installation)

```
composer require ether/craft-vue

```

Usage
-----

[](#usage)

First, register the module wherever you are rendering your Vue components:

```
class Field extends \craft\base\Field
{

    public function getInputHtml ()
    {
        \ether\craftvue\CraftVue::register();

        // ...
    }

}
```

Then in your JS register your component (this should be a JS file imported by an asset bundle):

```
Craft.booting(Vue => {
    Vue.component('my-component', require('../vue/MyComponent.vue'));
});
```

You can import your component however you want, but if you use `.vue` files be sure to compile them beforehand. `Craft.booting` supports returned `Promises`, and `await` / `async` syntax.

It's now possible to use `` anywhere in the `#main`div.

> **Note**: If you're developing, remember to set `'useCompressedJs' => false`to use Vue in development mode.

Future Features
---------------

[](#future-features)

- CLI for creating boilerplate for compatible Vue components with hot-reloading and other fun stuff (something like `./craft vue/create [name]`, perhaps using [Laravel Mix](https://laravel-mix.com/)).

###  Health Score

20

—

LowBetter than 14% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity8

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity39

Early-stage or recently created project

 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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/30c8191e4ff2ab8c26533caccdb3d82972acfb51bc5dc9650cb1d63b6ec48e82?d=identicon)[ether](/maintainers/ether)

---

Top Contributors

[![Tam](https://avatars.githubusercontent.com/u/977594?v=4)](https://github.com/Tam "Tam (13 commits)")

### Embed Badge

![Health badge](/badges/ether-craft-vue/health.svg)

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

###  Alternatives

[rs/laravel-version-control

Foundations for making your app version controlled. Provides migration, blueprint and base models. Will make your app GxP compliant if you exclusively use the VC models and table structure as set out in this package.

1227.5k](/packages/rs-laravel-version-control)[mad-web/laravel-seoable

Easy to map your eloquent fields to seo properties

407.6k](/packages/mad-web-laravel-seoable)[wpsitecare/carelib

A collection of helpful functions to make creating an awesome theme more enjoyable.

164.6k](/packages/wpsitecare-carelib)

PHPackages © 2026

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