vue2-migration-helper

Transforms Vue.js SFCs to composition api syntax.

Install

npm i vue2-migration-helper

CLI

# 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

Programatically use

import { vue2MigrationHelper } from 'vue2-migration-helper'

vue2MigrationHelper({
  source: 'source/',
  target: 'target/'
})

Try online

https://codesandbox.io/s/thirsty-dirac-modoj

Features

• add setup method
  • with props and context arguments
• add required vue imports
  • only adds required imports after traversing code
• update data properties
  • Uses data variable using reactive
  • Return reactive references using ref
  • updates usage of these varaiables
• update computed syntax
  • defines variable for each property using new syntax computed
• update watch syntax
  • updates watch syntax
• integrate methods directly into setup
  • defines methods into the setup body
  • updates method calls
• update template ref usage
  • adds a new variable for each templateRef using ref(null)
  • add new defined templateRefs to return statement
• convert props syntax
• update lifecycle hooks and remove deperecated lifecycle hooks
  • removes depracted life cycle hooks, injects deprecated hooks code into setup method.
  • copies other hooks into the setup method
• component registration
• replace this usage with new context parameter for $events etc
  • replaces this keyword usage as this no longer refers to vue component itself.

missing something?

Example

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
    }
  }
}