https://github.com/cyansalt/vue-spinach
Transform Vue SFC between Option API and Composition API
https://github.com/cyansalt/vue-spinach
composition-api vue
Last synced: 5 months ago
JSON representation
Transform Vue SFC between Option API and Composition API
- Host: GitHub
- URL: https://github.com/cyansalt/vue-spinach
- Owner: CyanSalt
- License: isc
- Created: 2024-04-25T10:08:48.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-25T02:53:14.000Z (about 1 year ago)
- Last Synced: 2025-08-28T09:06:01.962Z (11 months ago)
- Topics: composition-api, vue
- Language: TypeScript
- Homepage:
- Size: 468 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-spinach
[](https://www.npmjs.com/package/vue-spinach)
> Popeye can save Olive with the power of spinach. So do Olive.
Transform Vue SFC between Option API and Composition API.
> [!NOTE]
> This is **NOT** an official library of Vue.
> [!TIP]
> Currently only the transformation from Option API to Composition API is supported.
## Usage
### CLI
```shell
pnpm dlx vue-spinach [--print] [--out outFile] [--config configFile]
```
vue-spinach will read the file contents from `process.stdin` if `inFile` is not specified.
`outFile` defaults to the same as `inFile`, unless `inFile` is not specified or `print` is specified. Then it will be output via `process.stdout`.
`configFile` specifies an ES Module file with default exports. Refer to [Options](#options).
### JS API
```ts
import type { TransformOptions } from 'vue-spinach'
import { transformSFC } from 'vue-spinach'
function transformSFC(code: string, userOptions?: Partial): string
```
```js
import { transformSFC } from 'vue-spinach'
const code = transformSFC(`
export default {
// ...
}
`, {
reactivityTransform: true,
})
```
### Options
```ts
interface TransformOptions {
/**
* Always generate code in typescript
* @default false
*/
typescript: boolean,
/**
* Whether to generate block.
* @default true
*/
scriptSetup: boolean,
/**
* Whether to generate code using [Reactivity Transform]{@link https://vue-macros.dev/features/reactivity-transform.html}.
* @default false
*/
reactivityTransform: boolean,
/**
* Whether to destructure props defined by `defineProps`.
* Only valid when `scriptSetup` is `true`.
* @default true
*/
propsDestructure: boolean,
/**
* Specifies a mapping of import names.
* For example `{ 'vue-router': 'vue-router-v4' }`.
* @default {}
*/
aliases: Record<string, string>,
/**
* Specifies additional plugins.
* Plugins that transform Vue's built-in options are always enabled.
* @default [...builtinPlugins]
*/
plugins: Plugin[],
}
```
### Plugin
See [Write a Plugin](/docs/write-a-plugin.md).