Back

Vue 2 To Vue 3 Refs And Methods

0.0.5Last update Nov 11, 2024
by@seboran
Vue
migration

Example

This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it.

Before

// convert vue2 script component into vue 3 setup
export default {
  data: () => ({ message: 'Hello' }),
};

After

const message = ref('Hello');
export default {};

,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it.

Before

// convert vue2 script component into vue 3 setup
export default {
  data: () => ({ isActive: true }),
};

After

const isActive = ref(true);
export default {};

,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it.

Before

// convert vue2 script component into vue 3 setup
export default {
  data: () => ({ items: [1, 2, 3] }),
};

After

const items = ref([1, 2, 3]);
export default {};

,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it.

Before

// convert vue2 script component into vue 3 setup
export default {
  data: () => ({
    count: 0,
    message: 'Hello',
    isActive: true,
    items: [1, 2, 3],
  }),
};

After

const items = ref([1, 2, 3]);
const isActive = ref(true);
const message = ref('Hello');
const count = ref(0);


export default {};

,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it.

Before

// convert vue2 script component into vue 3 setup
export default {
  methods: {
    displayCoucou: function() {
      // the content isn't relevant
      console.log('coucou');
    },
  },
};

After

export default {
  methods: {
    displayCoucou: function() {
      // the content isn't relevant
      console.log('coucou');
    },
  },
};

,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it.

Before

// convert vue2 script component into vue 3 setup
export default {
  methods: {
    fetchApi: async function() {
      const request = await fetch('/request/info');
    },
  },
};

After

// convert vue2 script component into vue 3 setup
export default {
  methods: {
    fetchApi: async function() {
      const request = await fetch('/request/info');
    },
  },
};

,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it.

Before

export default {
  data: () => ({ count: 0 }),
  methods: {
    increment: function() {
      this.count += 1;
    },
  },
};

After

const count = ref(0);
export default {
  methods: {
    increment: function() {
      this.count += 1;
    },
  },
};

,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it.

Before

export default {
  data: () => ({ count: 0 }),
  methods: {
    increment: async function() {
      this.count = await (await fetch('/request')).json();
    },
  },
};

After

import { ref } from 'vue';
const count = ref(0);


export default {
  data: () => ({ count: 0 }),
  methods: {
    increment: async function() {
      this.count = await (await fetch('/request')).json();
    },
  },
};

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

background illustrationGet Started Now