Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/screeny05/shopware-vueify
Write Vue.js components for use within the Shopware-StateManager
https://github.com/screeny05/shopware-vueify
shopware shopware-plugin shopware-statemanager shopware-theme vue-components
Last synced: 28 days ago
JSON representation
Write Vue.js components for use within the Shopware-StateManager
- Host: GitHub
- URL: https://github.com/screeny05/shopware-vueify
- Owner: screeny05
- License: mit
- Created: 2016-11-22T17:51:21.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2016-12-15T09:52:34.000Z (almost 8 years ago)
- Last Synced: 2024-09-06T23:35:35.416Z (2 months ago)
- Topics: shopware, shopware-plugin, shopware-statemanager, shopware-theme, vue-components
- Language: JavaScript
- Homepage:
- Size: 11.7 KB
- Stars: 6
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-shopware - shopware-vueify - Write Vue.js components for use within the Shopware StateManager. (Frontend Development Resources)
README
# shopware-vueify
use vue components with the shopware statemanager
## Requirements
Requires Vue, jQuery and Shopware JS environment.
## Basic usage
```
vueify() :
```
```javascript
$.plugin('myComponent', vueify({
template: `
Hello, {{ who }}!
toggle
`,
data() {
return { who: 'world' };
},
methods: {
toggleWho(e) {
this.who = this.who === 'world' ? 'there' : 'world';
}
}
}));
StateManager.addPlugin('[data-my-component="true"]', 'myComponent', ['l', 'xl']);
```
Can be `require`d. If not, `vueify` is available globally.
### Stand-alone component files
Can be used with vue-files:
```javascript
const MyComponent = require('components/my-component.vue');
$.plugin('myComponent', vueify(MyComponent));
```
### Properties
Vueify has support for options, which get passed to vue as properties.
Including support for shopware inline-option style.
```javascript
$.plugin('myComponent', vueify({
props: {
value: Number,
additional: String
},
template: '
{{ value }}'
}));
StateManager.addPlugin('[data-my-component="true"]', 'myComponent', { additional: 'Foobar' });
```
```html
```
### Overriding
`$.override` is supported. Vueify makes the parent-component available to developers as `supercomponent`.
```javascript
$.plugin('myComponent', vueify({
template: `
`,
data() {
return { message: 'initial message' };
},
methods: {
triggerPonies() {
this.message = 'component message';
alert('hurray! message is: ' + this.message);
}
}
}));
// no vueify here
$.overridePlugin('myComponent', {
methods: {
triggerPonies() {
this.supercomponent.methods.triggerPonies.call(this);
this.message = 'child message';
}
}
});
```
`$.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.
```javascript
const plugin = $('.element').data('plugin_myComponent');
const vm = plugin.vm;
```
And vice versa:
```javascript
$.plugin('myComponent', vueify({
methods: {
enableCake() {
const plugin = this.$options.$plugin;
const $el = plugin.$el;
}
}
}));
```
### Lifecycle
Remember `init()` and `destroy()`? Yeah, screw those. now we've got a better lifecycle.
You may use any [Lifecycle Events](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram) 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.
```javascript
$.plugin('myComponent', vueify({
template: '
Hello, world!'
}));
StateManager.addPlugin('[data-my-component="true"]', 'myComponent', ['xl']);
```
```html
original content
When viewport equals xl:
Hello, world!
When viewport equals anything but xl:
original content
```
## Notes
When using slots you will need to use the standalone vue-build.
## Changelog
### 1.0.1 - 23. November 2016
* Improve README
* Fix webpack requiring $.PluginBase
### 1.0.0 - 22. November 2016
* Initial Release