{"id":14973662,"url":"https://github.com/dbfernverkehr/vue-class-style-codemod","last_synced_at":"2025-10-27T02:31:05.948Z","repository":{"id":209648230,"uuid":"722530078","full_name":"dbfernverkehr/vue-class-style-codemod","owner":"dbfernverkehr","description":"Vue3 Migration Tool ","archived":false,"fork":false,"pushed_at":"2023-11-28T14:22:48.000Z","size":189,"stargazers_count":13,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-02-01T01:33:12.841Z","etag":null,"topics":["jscodeshift","migration","vue2","vue2tovue3","vue3","vuejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dbfernverkehr.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-23T10:51:03.000Z","updated_at":"2025-01-26T13:22:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"48676ac9-d7d2-4527-b3de-7d9d653bb9b5","html_url":"https://github.com/dbfernverkehr/vue-class-style-codemod","commit_stats":{"total_commits":4,"total_committers":2,"mean_commits":2.0,"dds":0.25,"last_synced_commit":"15ac9b77f80f435bffc74fd0f7f061f826b0b1f2"},"previous_names":["dbfernverkehr/vue-class-style-codemod"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbfernverkehr%2Fvue-class-style-codemod","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbfernverkehr%2Fvue-class-style-codemod/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbfernverkehr%2Fvue-class-style-codemod/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbfernverkehr%2Fvue-class-style-codemod/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dbfernverkehr","download_url":"https://codeload.github.com/dbfernverkehr/vue-class-style-codemod/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238422860,"owners_count":19469635,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jscodeshift","migration","vue2","vue2tovue3","vue3","vuejs"],"created_at":"2024-09-24T13:49:10.503Z","updated_at":"2025-10-27T02:31:00.606Z","avatar_url":"https://github.com/dbfernverkehr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-class-style-codemod\n\nThis project is based on the fork of https://github.com/originjs/vue-codemod and was modified and further developed by Deutsche Bahn Fernverkehr AG.\n\n\u003e Cloned from https://github.com/originjs/vue-codemod\n\n`vue-class-style-codemod` is a Vue 2 to Vue 3 migration tool based on `vue-codemod` adding support to convert Vue Class-based components defined with [`vue-class-component`](https://github.com/vuejs/vue-class-component) and [`vue-property-decorator`](https://github.com/kaorun343/vue-property-decorator) to the `script setup` component syntax.\n\n\n## How to use\nInstall all dependencies and make vue-class-style-codemod available globally\n``npm run setup``  (Please use only npm and not yarn)\n\nTransformation of projects and individual files with the help of vue-class-style-codemod.\n\n\n\u003e vue-class-style-codemod \u003cfile-or-project-path\u003e -t/-a [transformation params]\n\nor\n\n\u003e npx vue-class-style-codemod \u003cfile-or-project-path\u003e -t/-a [transformation params]\n\n\n1) **\u003cfile-or-project-path\u003e** indicates the relative path of execution, which can be files and folders. If the file to be converted is in the same folder as the converter, you must specify the file starting from the parent folder.\n2) **-a** (or --runAllTransformation) means executing all rules.\n3) **-t** (or --transformation) means specific rule (ex. property-decorator)\n\nPlease note that the transformation completely replaces the old file\n\n##  Rules\nHaving already the rule `vue-class-component-v8` available in `vue-class-style-codemod`, this projects adds the two rules `property-decorator` and `define-component-to-script-setup`.\n\n### property-decorator\nThe rule converts most decorators of `vue-property-decorator`. The following table shows some exemplary conversions.\n\n#### Class\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e From \u003c/td\u003e \u003ctd\u003e To \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```javascript\nimport { Vue, Component } from 'vue-property-decorator';\n\n@Component\nexport default class CreatedInput extends Vue {\n  public created(): void {\n    this.groupControls.register(this.id);\n  }\n  public beforeCreated(): void {\n    this.groupControls.register(this.id);\n  }\n}\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\ngroupControls.register(id);\ngroupControls.register(id);\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n#### Emit\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e From \u003c/td\u003e \u003ctd\u003e To \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```javascript\n@Emit('reset')\nresetCount() {\n  this.count = 0;\n}\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n\n```javascript\nconst emit = defineEmits\u003c{\n(e: 'reset'): void\n}\u003e();\n\nfunction resetCount() {\n    count = 0;\n    emit(\"reset\");\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n#### Injection\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e From \u003c/td\u003e \u003ctd\u003e To \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```javascript\n@Inject() readonly foo!: string\n@Inject('bar') readonly bar!: string\n@Inject({ from: 'optional', default: 'default' }) readonly optional!: string\n@Inject(symbol) readonly baz!: string\n@Inject({ from: 'optional', default: () =\u003e 'Hello World' }) readonly optional!: string\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\nconst foo: string = inject('foo');\nconst bar: string = inject('bar');\nconst optional: string = inject('optional', 'default');\nconst baz: string = inject(symbol);\nconst optional: string = inject('optional', () =\u003e 'Hello World');\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n#### Next tick\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e From \u003c/td\u003e \u003ctd\u003e To \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```javascript\nawait this.$nextTick();\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\nawait nextTick();\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n#### Gettext\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e From \u003c/td\u003e \u003ctd\u003e To \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```javascript\npublic get cancelButtonText(): string {\n  // Cancel button text comment\n  return this.$gettext('Cancel');\n}\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\nconst cancelButtonText = computed\u003cstring\u003e(() =\u003e {\n  // Cancel button translation comment\n  return $gettext('Cancel');\n});\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n#### Prop\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e From \u003c/td\u003e \u003ctd\u003e To \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```javascript\n@Prop(Number) readonly propA: number | undefined\n@Prop({ default: 'default value' }) readonly propB: string\n@Prop({ type: String }) readonly propC!: string\n@Prop([String, Boolean]) readonly propD: string | boolean | undefined\n@Prop(Number) readonly propE!: number | undefined\n@Prop([String, Boolean]) readonly propF!: string | boolean | undefined\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\nconst props = withDefaults(defineProps\u003c{\n    propA?: number | undefined,\n    propB?: string,\n    propC: string,\n    propD?: string | boolean | undefined,\n    propE: number | undefined,\n    propF: string | boolean | undefined\n}\u003e(), {\n    propB: 'default value'\n});\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n#### Provide\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e From \u003c/td\u003e \u003ctd\u003e To \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```javascript\n@Provide() foo = 'foo';\n@Provide('bar') baz = 'bar';\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\nconst foo = reactive('foo');\nprovide('foo', foo);\nconst baz = reactive('bar');\nprovide('bar', baz);\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n#### Ref\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e From \u003c/td\u003e \u003ctd\u003e To \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```javascript\n@Ref() readonly anotherComponent!: AnotherComponent\n@Ref('aButton') readonly button!: HTMLButtonElement\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\nconst anotherComponent = ref\u003cAnotherComponent\u003e();\nconst aButton = ref\u003cHTMLButtonElement\u003e();\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n#### Static class fields\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e From \u003c/td\u003e \u003ctd\u003e To \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```javascript\nexport class AnyComponent extends Vue {\n  private static readonly noScrollClass: string = 'util__noscroll-xs';\n\n  public static addNoScrollXs(): void {\n      document.documentElement.classList.add(AnyComponent.noScrollClass);\n  }\n}\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\nconst noScrollClass: string = 'util__noscroll-xs';\n\nfunction addNoScrollXs(): void {\n    document.documentElement.classList.add(noScrollClass);\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n#### Router\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e From \u003c/td\u003e \u003ctd\u003e To \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```javascript\nmethodA() {\n  return this.$route.params.id\n}\n\nmethodB() {\n  return this.$router.back()\n}\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\nconst router = useRouter();\nconst route = useRoute();\n\nfunction methodA() {\n    return route.params.id;\n}\n\nfunction methodB() {\n    return router.back();\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n#### Vuex\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e From \u003c/td\u003e \u003ctd\u003e To \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```javascript\nmethodC() {\n  return this.$store.commit('increment')\n}\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\nfunction methodC() {\n    return store.commit('increment');\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n#### Watch\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e From \u003c/td\u003e \u003ctd\u003e To \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```javascript\n@Watch('person', { immediate: true, deep: true })\nonPersonChanged(val: Person, oldVal: Person) {}\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\nfunction onPersonChanged(val: Person, oldVal: Person) {}\nwatch(person, onPersonChanged);\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n### define-component-to-script-setup\nThis rule converts the `defineComponent` syntax to the `script setup` syntax.\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e From \u003c/td\u003e \u003ctd\u003e To \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```javascript\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'test',\n  components: {\n    testComponent\n  },\n  emit: ['change','input'],\n  props: {\n    counter: {\n      required: false,\n      type: Boolean\n    },\n  },\n  setup(props, ctx) {\n    ctx.emit('changeValue');\n   \treturn {\n    \ttest,\n      title: computed(() =\u003e 'Hello World'),\n    }\n  },\n\n  methods: {\n    doIt() {\n      console.log(`Hello ${this.name}`);\n    },\n  },\n\n});\n\u003c/script\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\n\u003cscript setup lang=\"ts\"\u003e\n  const emit = defineEmits\u003c{\n    (e: 'change'): void,\n    (e: 'input'): void\n  }\u003e();\n\n  const props = defineProps\u003c{\n    counter?: Boolean\n  }\u003e();\n\n  const title = computed(() =\u003e 'Hello World');\n  emit('changeValue');\n\n  function doIt() {\n    console.log(`Hello ${name}`);\n  }\n\u003c/script\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\nLicense Information:\n\nThe copyright of the original repo licensed under the copyright of vuejs and the changes under the copyright of DB Fernverkehr. All code and modifications are licensed under the **MIT license**.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbfernverkehr%2Fvue-class-style-codemod","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdbfernverkehr%2Fvue-class-style-codemod","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbfernverkehr%2Fvue-class-style-codemod/lists"}