ether / craft-vue
A helper module for building Craft CMS plugins with Vue components
Installs: 10
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 4
Forks: 1
Open Issues: 0
Type:yii-module
This package is auto-updated.
Last update: 2024-11-05 19:09:57 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).