Vue Declassified (vuedc)

• Vue Class Components -> Vue 3 script setup
  • Opinionated decisions
• Install
• Usage
  • vuedc CLI
• Supported Features
  • vue-class-component
    • @Component / @Options (v8.0.0-rc.1)
  • vue-property-decorator
  • vuex-class

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

Install

pnpm add @heatsrc/vue-declassified

npm install @heatsrc/vue-declassified

yarn install @heatsrc/vue-declassified

Usage

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

vuedc CLI

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

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

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