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 --s="source/" --t="target/"
# displays help
vue2-migration-helper --help
import { vue2MigrationHelper } from 'vue2-migration-helper'
vue2MigrationHelper({
source: 'source/',
target: 'target/'
})
https://codesandbox.io/s/thirsty-dirac-modoj
setup
methodprops
and context
argumentsimports
data
propertiesdata
variable using reactive
ref
computed
syntaxcomputed
watch
syntaxmethods
directly into setupmethods
into the setup bodyref
usagetemplateRef
using ref(null)
props
syntaxlifecycle
hooks and remove deperecated lifecycle hookssetup
method.hooks
into the setup
methodcomponent
registrationthis
usage with new context
parameter for $events etcthis
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
}
}
}
Generated using TypeDoc