Vue-class-transformer NPM

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

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)