Transforms Vue.js SFCs to composition api syntax.
npm i vue2-migration-helper
# convert all .vue files in source directory and outputs in target directory
vue2-migration-helper --source="source" --target="target"
# displays help
vue2-migration-helper --help
import { vue2MigrationHelper } from 'vue2-migration-helper'
vue2MigrationHelper({
source: 'source/',
target: 'target/',
})
setup
method
props
and context
argumentsimports
data
properties
data
variable using reactive
ref
computed
syntax
computed
watch
syntax
methods
directly into setup
methods
into the setup bodyref
usage
templateRef
using ref(null)
props
syntaxlifecycle
hooks and remove deperecated lifecycle hooks
setup
method.hooks
into the setup
methodcomponent
registrationthis
usage with new context
parameter for $events etc
this
keyword usage as this no longer refers to vue component itself.missing something?
For a Vue.js SFC (single file component) like this:
import SomeComponent from './SomeComponent'
const zero = {}
export default {
props: {
title: String,
likes: Number,
callback: Function,
},
components: {
SomeComponent,
},
data() {
return {
one: true,
two: 2,
three: 'three',
}
},
watch: {
one(val) {
console.log(val)
},
two: (val) => {
console.log(val)
},
three: function (a, b) {
console.log(a, b)
},
},
computed: {
oneComputed() {
return !this.one
},
twoComputed: () => {
return !this.one
},
threeComputed: function () {
return !this.one
},
},
created() {
console.log('created')
},
mounted() {
console.log('mounted')
},
methods: {
...[
function fourMethod() {
console.log('fourMethod')
},
function fiveMethod() {
console.log('fiveMethod')
},
],
oneMethod() {
const html = this.$refs.templateRef.innerHTML
console.log('oneMethod')
console.log(this.oneComputed)
},
twoMethod: function () {
this.$refs.templateRef.innerHTML = 'html'
console.log('twoMethod')
console.log(this.twoComputed)
this.oneMethod()
console.log(this.$router)
},
threeMethod: () => {
console.log('threeMethod')
console.log(this.threeComputed)
this.twoMethod()
console.log(this.$store)
},
},
}
this script generates Vue SFC using composition API:
import {
ref,
reacted,
toRefs,
watch,
computed,
onCreated,
onMounted,
} from 'vue'
import SomeComponent from './SomeComponent'
const zero = {}
export default {
components: {
SomeComponent,
},
props: {
title: String,
likes: Number,
callback: Function,
},
setup(props, context) {
const data = reactive({
one: true,
two: 2,
three: 'three',
})
const templateRef = ref(null)
watch(three, (a, b) => {
console.log(a, b)
})
watch(two, (val) => {
console.log(val)
})
watch(one, (val) => {
console.log(val)
})
const oneComputed = computed(() => {
return !data.one
})
const twoComputed = computed(() => {
return data.two + 5
})
const threeComputed = computed(() => {
return data.three.toUpperCase()
})
;(() => {
console.log('created')
})()
onMounted(() => {
console.log('mounted')
})
function fourMethod() {
console.log('fourMethod')
}
function fiveMethod() {
console.log('fiveMethod')
}
function oneMethod() {
const html = templateRef.innerHTML
console.log('oneMethod')
console.log(oneComputed)
console.log(context.$data)
}
function twoMethod() {
templateRef.innerHTML = 'html'
console.log('twoMethod')
console.log(twoComputed)
oneMethod()
console.log(context.$router)
}
function threeMethod() {
console.log('threeMethod')
console.log(threeComputed)
twoMethod()
console.log(fourMethod)
console.log(context.$store)
}
return {
...ref(data),
oneComputed,
twoComputed,
threeComputed,
fourMethod,
fiveMethod,
oneMethod,
twoMethod,
threeMethod,
templateRef,
}
},
}
Author: mubaidr
Demo: https://vue2-migration-helper.netlify.app/
Source Code: https://github.com/mubaidr/vue2-migration-helper
#vuejs #vue #javascript