shopware-vueify
use vue components with the shopware statemanager
Requirements
Requires Vue, jQuery and Shopware JS environment.
Basic usage
vueify(<Component>) : <Shopware-jQuery-Plugin>
$; StateManager;
Can be require
d. If not, vueify
is available globally.
Stand-alone component files
Can be used with vue-files:
const MyComponent = ;$;
Properties
Vueify has support for options, which get passed to vue as properties. Including support for shopware inline-option style.
$; StateManager;
Overriding
$.override
is supported. Vueify makes the parent-component available to developers as supercomponent
.
$; // no vueify here$;
$.overridePlugin
works as you expect it. You can override any property with it, including props
and template
.
Plugin access
To access the Vue-instance externally you need to get hold of the plugin-data first.
const plugin = data'plugin_myComponent';const vm = pluginvm;
And vice versa:
$;
Lifecycle
Remember init()
and destroy()
? Yeah, screw those. now we've got a better lifecycle.
You may use any Lifecycle Events Vue offers you.
Once a Vueified™ plugin gets added to an element, the $el
s content will get replaced by the vue-component.
When that plugin then gets destroyed, the original content will get re-added and the vue-component disappears.
$; StateManager;
original content When viewport equals xl: Hello, world! When viewport equals anything but xl: original content
Currently unsupported:
- Slots
Changelog
1.0.1 - 23. November 2016
- Improve README
- Fix webpack requiring $.PluginBase
1.0.0 - 22. November 2016
- Initial Release