https://github.com/kalimahapps/vue-options-to-composition
Online tool to convert vue2 options to vue3 composition API
https://github.com/kalimahapps/vue-options-to-composition
composition-api options-api vue vue3
Last synced: 11 months ago
JSON representation
Online tool to convert vue2 options to vue3 composition API
- Host: GitHub
- URL: https://github.com/kalimahapps/vue-options-to-composition
- Owner: kalimahapps
- Archived: true
- Created: 2023-05-23T10:57:53.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-09-30T14:59:17.000Z (over 1 year ago)
- Last Synced: 2025-05-14T13:20:01.432Z (about 1 year ago)
- Topics: composition-api, options-api, vue, vue3
- Language: TypeScript
- Homepage: https://kalimah-apps.com/vue-options-to-composition/
- Size: 284 KB
- Stars: 16
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# This repo is archived. The project has been moved to [Kalimah Tools](https://github.com/kalimahapps/tools)
# Vue Options to Composition API Converter
## Introduction
This is an online tool to convert Vue 2 options API code to Vue 3 composition API code.
## Example
Input Vue 2 options API code:
```js
export default {
data:{
items: [],
list: {},
},
props: ['loading', 'lazy', 'disabled'],
methods:{
isLazy(){
return this.lazy;
},
isLoading: function(){
return this.loading;
},
isDisabled: () => {
return this.disabled;
}
},
watch:{
loading(newValue){
console.log("Value", newValue);
},
disabled:{
immediate: true,
handler(value) {
this.bar = value;
}
}
}
}
```
Output Vue 3 composition API code:
```js
import { reactive, watch } from 'vue';
// Data
const items = reactive([]);
const list = reactive({});
// Props
const props = defineProps(['loading', 'lazy', 'disabled']);
// Methods
const isLazy = function(){
return props.lazy;
}
const isLoading = function(){
return props.loading;
}
const isDisabled = () => {
return props.disabled;
}
// Watch
watch(loading, function(newValue){
console.log("Value", newValue);
})
watch(disabled, function (value) {
this.bar = value;
}, { immediate: true })
```