Vue Declassified (vuedc)

npm | github | vuedc playground

• Vue Class Components -> Vue 3 script setup
  • Opinionated decisions
• Usage
  • vuedc CLI (recommended)
  • Programmatically
    • Install
      • Dependencies
    • Code
• Supported Features
  • vue-class-component
    • @Component / @Options (v8.0.0-rc.1)
  • vue-property-decorator
  • vuex-class
  • Misc features
• Tips / Gotchas
  • Directives / Component names
  • Naming collisions
    • $refs with same name as class members
    • Top level identifiers

Vue Class Components -> Vue 3 script setup

Vue Declassified is an opinionated tool that will format Vue class components (including the v8 RC package) to script setup. This project a fork and re-write of yoyo930021's vc2c which is focused more on Vue 2 -> Composition API using defineComponent.

Opinionated decisions

These decisions are made arbitrarily, mostly for sanity and convenience. You get what you get and you don't get upset.

• No/Limited configuration
  • There is a lot of different edge cases to test and adding configuration options tends to act as a multiplier for those cases.
• Will only support TS
• Won't support esoteric/redundant @Component/@Options options
  • Will consider accepting PRs
• Will order files script -> template -> style
• Will reference macros by arbitrary variables (see below)
• Will be formatted by prettier with default config
  • exception printWidth increased to 100 characters

Usage

vuedc CLI (recommended)

You can call the CLI tool to convert a file directly from a terminal. For more information see the vuedc readme.

pnpm add -g @heatsrc/vuedc
# or
npm install -g @heatsrc/vuedc
# or
yarn add -g @heatsrc/vuedc

vuedc -i myVueComponent.vue -o myVueComponent.converted.vue

or run directly with hot loading

pnpm dlx vuedc -i myVueComponent.vue -o myVueComponent.converted.vue
# or
npx vuedc -i myVueComponent.vue -o myVueComponent.converted.vue
# or
yarn dlx vuedc -i myVueComponent.vue -o myVueComponent.converted.vue

Programmatically

Install

Dependencies

If you want to use this without the cli tool you'll need to ensure you have the following packages installed

• typescript@^5.2.2
• vue@^3.3.4
• prettier@^3.0.3

Additionally vue-declassified requires Node 18+

pnpm add @heatsrc/vue-declassified
# or
npm install @heatsrc/vue-declassified
# or
yarn install @heatsrc/vue-declassified

Code

import { convertSfc } from "@heatsrc/vue-declassified";
import {readFile, writeFile} from 'node:fs/promises';

const input = "./myVueComponent.vue";
const output = "./myVueComponent.converted.vue";

(async () => {
  const encoding = {encoding: 'utf8'};
  const inputFile = await readFile(input, encoding);

  const result = await convertSfc(input, output);

  await writeFile(output, encoding);
}());

import { convertScript } from "@heatsrc/vue-declassified";

const input = `
import { Component } from 'vue-class-component';
@Component()
export default class MyComponent extends Vue {
  myData: string = 'foo';
}`;

const result = convertScript(input);

console.log(result);
// import { ref } from 'vue';
// const myData = ref<string>('foo');

Supported Features

vue-class-component

@Component / @Options (v8.0.0-rc.1)

These are options provided in the decorator call, e.g., @Component({ components: { MyIcon } }). All Options API fields are technically supported in Vue Class Components (e.g., data, computed, methods, etc) but many of them don't make sense and will not be actively developed but PRs may be accepted.

vue-property-decorator

vuex-class

Misc features

Tips / Gotchas

Directives / Component names

Vue expects directive and components to match their name (PascalCase/camelCase -> kebab-case). Currently Vuedc doesn't detect if you've used a different name and aliased it in the component options

<script lang="ts">
import {Component, Vue} from 'vue-class-components';
import myComponentVue from './MyComponent.vue';
import myDirective from './MyDirective.ts';

@Component({
  components: { MyComponent: myComponentVue },
  directives: { vMyDirective: myDirective }
})
export default Foo extends Vue {}
</script>

// will be converted to:

<script setup lang="ts">
import myComponentVue from "./MyComponent.vue";
import myDirective from "./MyDirective.ts";
</script>

<template>
  <!-- This is a problem ! -->
  <my-component v-my-directive />
</template>

So make sure to rename your imports to match what the template is calling.

e.g.,

<script setup lang="ts">
import MyComponent from "./MyComponent.vue";
import vMyDirective from "./vMyDirective.ts";
</script>

<template>
  <my-component v-my-directive />
</template>

Naming collisions

It's strongly recommended you resolve potential naming collisions prior to converting your code, vuedc doesn't have complete knowledge of the codes intention and doesn't update templates (yet?) so it can't reliably rename variables for you.

Common reasons for naming collisions:

$refs with same name as class members

Properties on the $refs object get converted to top level variable declarations and can collide with other class members sharing the same name.

e.g.,

@Component
export default class Foo extends Vue {
  foo = "bar";

  $refs!: {
    foo: HTMLDivElement;
  };
}

// will be converted to

const foo = ref<string>("bar");
const foo = ref<HTMLDivElement>();
//    ^? Cannot redeclare block-scoped variable 'foo'.ts(2451)

Top level identifiers

It's not uncommon for you to import a variable from another module and make it available as a class member with the same name.

e.g.,

import foo from './foo';
const bar = foo;
const { a, b: { c } } = {a: true, b: { c: false } };
const [d, e, {f}] = [1, 2, {f: 3}];

@Component
export default Foo {
  foo = 'string';
  a = 1;
  b = 'b';
  d = [1, 2, 3];
  @Inject e: () => 'e';
  @Action f: () => Promise<void>;


  get bar() {
  }

  c() {
  }
}

// will be converted to

import foo from './foo';
const bar = foo;
const { a, b: { c } } = {a: true, b: { c: false } };
const [d, e, {f}] = [1, 2, {f: 3}];
const foo = ref('string');
//    ^? Cannot redeclare block-scoped variable 'foo'.ts(2451)
const a = ref(1);
//    ^? Cannot redeclare block-scoped variable 'a'.ts(2451)
const b = ref('b');
//    ^? Cannot redeclare block-scoped variable 'b'.ts(2451)
const d = reactive([1, 2, 3]);
//    ^? Cannot redeclare block-scoped variable 'd'.ts(2451)
const e = inject<() => 'e'>('e');
//    ^? Cannot redeclare block-scoped variable 'e'.ts(2451)
const f = (): Promise<void> => store.dispatch('f');
//    ^? Cannot redeclare block-scoped variable 'f'.ts(2451)
const bar = computed(() => 'val');
//    ^? Cannot redeclare block-scoped variable 'bar'.ts(2451)
const c = () => 'foo';
//    ^? Cannot redeclare block-scoped variable 'c'.ts(2451)