1 | # babel-preset-vue
|
2 |
|
3 | Babel preset for all Vue plugins.
|
4 |
|
5 | ## Install
|
6 |
|
7 | ```bash
|
8 | npm install -D babel-preset-vue
|
9 | ```
|
10 |
|
11 | CDN: [UNPKG](https://unpkg.com/babel-preset-vue/)
|
12 |
|
13 | ## Usage
|
14 |
|
15 | In your `.babelrc`:
|
16 |
|
17 | ```json
|
18 | {
|
19 | "presets": ["vue"]
|
20 | }
|
21 | ```
|
22 |
|
23 | You 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 |
|
42 | Option name: `eventModifiers`
|
43 |
|
44 | Uses [`babel-plugin-jsx-event-modifier`](https://github.com/nickmessing/babel-plugin-jsx-event-modifiers) for adding event modifiers support.
|
45 |
|
46 | Example:
|
47 | ```js
|
48 | Vue.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 |
|
66 | Options name: `vModel`
|
67 |
|
68 | Uses [`babel-plugin-jsx-v-model`](https://github.com/nickmessing/babel-plugin-jsx-v-model) for adding `v-model` support.
|
69 |
|
70 | Example:
|
71 |
|
72 | ```js
|
73 | Vue.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 |
|
90 | MIT © [EGOIST](https://github.com/egoist)
|