Skip to content

Vue cli transforming vanilla component syntax to Typescript class based syntax

Notifications You must be signed in to change notification settings


Repository files navigation

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


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
components/my-component.vue generated/my-component.vue
  <h1>Hello world</h1>

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) {
  methods: {
    close () {
      this.isOpen = false
  <h1>Hello world</h1>

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

  components: { TextField },
export default class MyComponent extends Vue {
  isOpen = false
  query = ''

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

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

  onLoadingUpdate(newVal, oldVal) {

  close() {
    this.isOpen = false;


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


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)


Vue cli transforming vanilla component syntax to Typescript class based syntax






No releases published


No packages published