Vue Class Transformer is a Nodejs CLI that transform your Vanilla Vue.js components to Typescript class based components,
following the syntax provided by the awesome vue-property-decorator library.

Table of content

• Usage
  • Disclaimer
• Documentation
  • Select components
  • CLI Options
  • Examples with options
  • Roadmap (Fancy Todos)

Usage

Install it globally using npm or yarn

# With npm
$ npm install -g vue-class-transformer
# With Yarn
$ yarn global add vue-class-transformer

# You should have access to the `vct` command
$ vct components/my-component.vue

<template>
  <h1>Hello world</h1>
</template>

<script>
import Vue from 'vue'

export default Vue.extend({
  name: 'MyComponent',
  components: { TextField },
  data () {
    return {
      isOpen: false,
      query: '',
    }
  },
  props: {
    loading: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    hasQuery: {
      get (): boolean {
        return !!this.query
      }
    }
  },
  watch: {
    loading: function(newVal, oldVal) {
      console.log(newVal)
    },
  },
  methods: {
    close () {
      this.isOpen = false
    }
  }
})
</script>

<template>
  <h1>Hello world</h1>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import { TextField } from "~/components/test-field.vue";

@Component<MyComponent>({
  components: { TextField },
})
export default class MyComponent extends Vue {
  isOpen = false
  query = ''

  get hasQuery(): boolean {
    return !!this.query;
  }

  @Prop({ type: Boolean, default: false })
  loading!: boolean;

  @Watch('loading')
  onLoadingUpdate(newVal, oldVal) {
    console.log(newVal);
  }

  close() {
    this.isOpen = false;
  }
}
</script>

Disclaimer

This project is still under development and is likely to raise errors on usages. Feel free to open a GitHub issue for any bug encountered!

I'm a humble developer just like you, not a genius / robot.
Any help or feedback is more than welcome :)

Documentation

The Typescript transformation supposes you will use the library vue-property-decorator (or its nuxt variant nuxt-property-decorator).

Select components

You should only select .vue files.
It will work even if your SFC imports an external script like so: <script src="./index.js" />

  # Transform a single component
  vct ./components/index.vue

  # Select all .vue files under the components/ folder (deep search).
  vct ./components/**/*.vue

CLI Options

| Name | Alias | Default value | Description | |------|-------|---------------|-------------| | version | | | Print the cli version. | | nuxt | -n | false | Import the class properties from nuxt-property-decorators instead of vue-property-decorators | | force | -f | false | Transform the script in place, do not create a new file | | output | -o | ./generated | Specify the transformed components output folder | | verbose | -v | false | Trigger verbose mode. Display script details. | | order | | "data props computed watcher hooks methods other" | Specify the order of the component properties on the transformed script.Currently, if you omit one of the section, it won't be present on the converted component script. |

Examples with options

  # Use the nuxt library and write the transformed components in a new transformed/ folder.
  vct -n -o ./components/transformed/ ./components/*.vue

  # Write the transformed components in the existing files
  # and specify the order of the class properties.
  # Do not forget to use the -- at the end to separate the order parameters and the files glob argument.
  vct -f --order data hooks watcher computed methods other -- components/*.vue

Roadmap (Fancy Todos)

• !!! Add more unit tests (edge cases, normal cases, typescript vanilla syntax etc.)
• !! Keep directory tree for output files (don't create everything under generated/ or same name files will override themselves)