npm | github | vuedc playground

• Vue Class Components -> Vue 3 script setup
  • Opinionated decisions
• Usage
  • vuedc CLI (recommended)
  • Programmatically
    • Install
      • Dependencies
    • Code
      • Options
• 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
    • Reactive Variables
    • Transforming Components extending Mixins

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.

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

• 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
• Mixins will be renamed to match composable conventions (see Tips/Gotchas: Mixins)
• When transforming TypeScript files containing mixins a new composable will be appended to the file but the existing mixin will be left

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 create composables out of VCC Mixins
vuedc -i myMixin.ts

or run directly with hot loading

pnpm dlx @heatsrc/vuedc -i myVueComponent.vue -o myVueComponent.converted.vue
# or
npx @heatsrc/vuedc -i myVueComponent.vue -o myVueComponent.converted.vue
# or
yarn dlx @heatsrcvuedc -i myVueComponent.vue -o myVueComponent.converted.vue

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

Vuedc provides a very limited set of options to keep maintainability of the program sustainable.

export type VuedcOptions = {
  /**
   * When true Vuedc will not stringify the vue file but instead return the
   * variable collisions
   */
  stopOnCollisions?: boolean;
  /**
   * When provided Vuedc will attempt to find a tsconfig.json project file along
   * the path. If found it will use the compiler options from this file rather
   * than simple defaults.
   *
   * Note: Unless you need external file references (e.g., mixins), it's
   * recommended not providing this. Using your project can be *significantly*
   * slower as TS will need to compile your entire project and uses the file
   * system rather than an in-memory file system when no project is provided.
   */
  basePath?: string;
};

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

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

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

  const result: string | undefined;
  if (extName === '.vue') {
    result = await convertSfc(input);
    // or with options
    // result = await convertSfc(input, {stopOnCollisions: true, basePath: dirname(input)});
  } else {
    result = await convertMixin(input);
    // or with options
    // result = await convertMixin(input, {stopOnCollisions: true, basePath: dirname(input)});
  }


  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');

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

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:

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)

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)

When Vuedc encounters a data property assigned to an Array or Object it will assume you want to wrap it in reactive. This can be a problem if you're reassigning the variable in the code. Vuedc will assign the variable to a const so it should be immediately apparently that something is wrong and it's up to you how to refactor it.

You can convert the reactive to ref and add .value to the reassignments but you will lose deep reactivity of those variables (which may be the intention.)

❗ Note: Mixins support only works when you provide convertSfc with a basePath in the VuedcOptions (or with the -p | --project flag in the Vuedc cli tool).

When mixins are detected Vuedc will assume you've created a composable analog in the same file and perform the following

• Transform
  • First char of mixin will be capitalized: (fooMixin -> FooMixin)
  • use will be prefixed: (FooMixin -> useFooMixin)
  • Mixin will be removed (if detected): (useFooMixin -> useFoo)
• Exported variables are mapped 1:1 with public members of Mixin
  • e.g., const { isLoading, bar, fetchData } = useFoo();
• All public members belonging to the mixin will be imported by the component
• Property/Accessors will have .value added to the property access
  • e.g., const isReady = computed(() => !isLoading.value)

ℹ️ Vuedc cannot (yet) detect which mixin members have been used in the template so will just import them all and you should refactor to remove unused variables.

ℹ️ The old mixin isn't deleted from the import so it's up to you to clean it up.