Package Exports
- babel-preset-vue
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-preset-vue) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
babel-preset-vue
Babel preset for all Vue plugins.
Install
npm install -D babel-preset-vueCDN: UNPKG
Usage
{
"presets": ["vue"]
}Supports event modifiers.
Uses babel-plugin-jsx-event-modifier for event modifiers.
Example:
Vue.component('hello-world', {
methods: {
method () {
console.log('clicked')
}
},
render () {
return (
<div>
<a href="/" onClick:prevent={this.method} />
</div>
)
}
})More information available on plugin's github page.
Supports functional components.
Uses babel-plugin-jsx-vue-functional for functional components.
Example:
const A = ({ props }) => <h1>{props.msg}</h1>
const B = ({ listeners }) => (
<div onClick={listeners.click}>
<A msg="Hello World!">
</div>
)More information available on plugin's github page.
Supports v-model.
Uses babel-plugin-jsx-v-model for two-way data binding with form elements.
Example:
Vue.component('hello-world', {
data: () => ({
text: 'Hello World!'
}),
render () {
return (
<div>
<input type="text" v-model={this.text} />
{this.text}
</div>
)
}
})More information available on plugin's github page.
License
MIT © EGOIST