UNPKG

1.41 kBMarkdownView Raw
1# babel-preset-vue
2
3Babel preset for all Vue plugins.
4
5## Install
6
7```bash
8npm install -D babel-preset-vue
9```
10
11CDN: [UNPKG](https://unpkg.com/babel-preset-vue/)
12
13## Usage
14
15In your `.babelrc`:
16
17```json
18{
19 "presets": ["vue"]
20}
21```
22
23You can toggle specific features, by default all features are enabled, e.g.:
24
25```json
26{
27 "presets": [
28 ["vue", {
29 "eventModifiers": false
30 }]
31 ]
32}
33```
34
35
36## JSX Features
37
38> Note that following features are not available for babel v7 currently, you may disable them if necessary.
39
40### Event modifiers
41
42Option name: `eventModifiers`
43
44Uses [`babel-plugin-jsx-event-modifier`](https://github.com/nickmessing/babel-plugin-jsx-event-modifiers) for adding event modifiers support.
45
46Example:
47```js
48Vue.component('hello-world', {
49 methods: {
50 method () {
51 console.log('clicked')
52 }
53 },
54 render () {
55 return (
56 <div>
57 <a href="/" onClick:prevent={this.method} />
58 </div>
59 )
60 }
61})
62```
63
64### v-model
65
66Options name: `vModel`
67
68Uses [`babel-plugin-jsx-v-model`](https://github.com/nickmessing/babel-plugin-jsx-v-model) for adding `v-model` support.
69
70Example:
71
72```js
73Vue.component('hello-world', {
74 data: () => ({
75 text: 'Hello World!'
76 }),
77 render () {
78 return (
79 <div>
80 <input type="text" v-model={this.text} />
81 {this.text}
82 </div>
83 )
84 }
85})
86```
87
88## License
89
90MIT &copy; [EGOIST](https://github.com/egoist)