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 6d 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

[sylvainjule/code-editor

Code editor field for Kirby 3, 4 and 5

377.4k](/packages/sylvainjule-code-editor)[runelaenen/sw6-redirects

Redirect plugin for Shopware 6

2511.2k](/packages/runelaenen-sw6-redirects)[jiaxincui/hashid

Laravel ID Encrypt Helper

2410.8k](/packages/jiaxincui-hashid)[bicpi/html-converter

HTML-to-Text converter library

1120.7k1](/packages/bicpi-html-converter)[williarin/cook

Composer plugin to execute recipes embedded in packages

252.1k3](/packages/williarin-cook)

PHPackages © 2026

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