ether/craft-vue

A helper module for building Craft CMS plugins with Vue components

Maintainers

Details

github.com/ethercreative/craft-vue

Source

Issues

Installs: 10

Dependents: 0

Suggesters: 0

Security: 0

Stars: 1

Watchers: 4

Forks: 1

Open Issues: 0

Type:yii-module

dev-master 2018-10-04 22:22 UTC

MIT 6796f16520e3ae87410b07fe9850edfb8abcca3e

  • Tam <hi.woop@tam.sx>

This package is auto-updated.

Last update: 2024-12-05 19:24:12 UTC

README

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

This supports all major browsers except IE11.

Installation

composer require ether/craft-vue

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 <my-component></my-component> anywhere in the #main div.

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

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).