This repository was archived by the owner on Dec 25, 2024. It is now read-only.
File tree Expand file tree Collapse file tree 3 files changed +78
-3
lines changed Expand file tree Collapse file tree 3 files changed +78
-3
lines changed Original file line number Diff line number Diff line change 2
2
3
3
[ ![ NPM version] ( https://img.shields.io/npm/v/vue2-script-setup-transform?color=a1b858&label= )] ( https://www.npmjs.com/package/vue2-script-setup-transform )
4
4
5
- Bring ` <script setup> ` to Vue 2
5
+ Bring ` <script setup> ` to Vue 2.
6
+
7
+ ## Install
8
+
9
+ ``` bash
10
+ npm i -D vue2-script-setup-transform
11
+ npm i @vue/composition-api
12
+ ```
13
+
14
+ Install ` @vue/composition-api ` in your App's entry:
15
+
16
+ ``` ts
17
+ import Vue from ' vue'
18
+ import VueComposisionAPI from ' @vue/composition-api'
19
+
20
+ Vue .use (VueComposisionAPI )
21
+ ```
22
+
23
+ ###### Vite
24
+
25
+ ``` ts
26
+ // vite.config.ts
27
+ import { defineConfig } from ' vite'
28
+ import { createVuePlugin as Vue2 } from ' vite-plugin-vue2'
29
+ import ScriptSetup from ' vue2-script-setup-transform/vite-plugin'
30
+
31
+ export default defineConfig ({
32
+ plugins: [
33
+ Vue2 (),
34
+ ScriptSetup (),
35
+ ],
36
+ })
37
+ ```
38
+
39
+ ###### Webpack
40
+
41
+ ``` ts
42
+ // webpack.config.js
43
+ import ScriptSetup from ' vue2-script-setup-transform/webpack-plugin'
44
+
45
+ module .exports = {
46
+ /* ... */
47
+ plugins: [
48
+ ScriptSetup ()
49
+ ]
50
+ }
51
+ ```
52
+
53
+ ###### JavaScript API
54
+
55
+ ``` ts
56
+ import { transform } from ' vue2-script-setup-transform'
57
+
58
+ const Vue2SFC = transform (`
59
+ <template>
60
+ <!-- ... -->
61
+ </template>
62
+
63
+ <script setup>
64
+ // ...
65
+ </script>
66
+ ` )
67
+ ```
6
68
7
69
## Status
8
70
9
71
- [x] POC
10
72
- [x] Components registration
11
- - [ ] Compile time macros
73
+ - [x ] Compile time macros ` defineProps ` ` defineEmits ` ` withDefaults `
12
74
- [x] Merge with normal scripts
13
75
- [x] Vite plugin
14
76
- [x] Webpack plugin
Original file line number Diff line number Diff line change 50
50
"@antfu/ni" : " ^0.7.0" ,
51
51
"@types/jest" : " ^26.0.24" ,
52
52
"@types/node" : " ^16.4.12" ,
53
+ "@vue/composition-api" : " ^1.1.1" ,
53
54
"bumpp" : " ^6.0.6" ,
54
55
"eslint" : " ^7.32.0" ,
55
56
"eslint-plugin-jest" : " ^24.4.0" ,
60
61
"typescript" : " ^4.3.5" ,
61
62
"vite" : " ^2.5.0"
62
63
},
64
+ "peerDependencies" : {
65
+ "@vue/composition-api" : " ^1.0.0"
66
+ },
63
67
"dependencies" : {
64
68
"@babel/core" : " ^7.15.0" ,
65
69
"@babel/generator" : " ^7.15.0" ,
You can’t perform that action at this time.
0 commit comments