Vue Options API to Composition API converter
npm install vue-o2cWORK IN PROGRESS -- the following is not done:
- bunch of stuff still not implemented (working through case by case)
- publish package correctly for CLI command to work (need to check)
- data() preamble -- if there is preamble maybe just create refs then use the function to set them
- handle setup() in options api
- allow options to configure (eg. no typescript)
- $el needs to try to rewrite part of template
- would like to maintain indentation
After running, check for FIXME comments
Composition API does not allow easy access of app.config.globalProperties like options API does.
vue-o2c takes care of some basic cases (eg. this.$router assuming vue-router) but for others, you will
see comments like the following and you must adjust the code depending on how you provide these systems.
``typescript`
const $primevue = inject("primevue") / FIXME vue-o2c /
This is not working due to a publishing issue I need to fix...
`bash`
$ npx vue-o2c /path/to/sfc.vue
...
...
`bash`
$ pnpm add -D vue-o2c
Please keep in mind, API is very experimental and likely will change!
`typescript
import { transformPath, transform, type State } from "vue-o2c"
const s1: State = transformPath("/path/to/sfc.vue")
const s2: State = transform("")
// s1.transformed and s2.transformed will both contained transformed code
`
Given the following file:
`vue cat tests/fixtures/example/input.vue
div
p Wonderful
`
`bash`
$ git clone git@github.com:tjk/vue-o2c.git
$ cd vue-o2c
$ pnpm i
$ pnpm exec tsx index.ts ./example.vue
Will output the following:
`vue pnpm exec tsx src/cli.ts ./tests/fixtures/example/input.vue
div(ref="$el")
p Wonderful
``