Vue2 Typescript Jetbrains Template

Over the years I have tried a variety of IDEs and I have found that Jetbrains produces a suite of software that fits my needs beautifully.

Vue is a web framework I have recently been working with for various web applications. It is highly modular and supports TypeScript. Jetbrains Webstorm does not include a template for creating Vue Single File Components using class components and TypeScript.

Here is a template created to include these features:

<template>
#[[$END$]]#
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator';

@Component({ components: {} })
export default class ${COMPONENT_NAME} extends Vue {
\$refs!: {};

}
</script>

<style scoped>

</style>

It includes the Prop and Watch decorators from the vue-property-decorator package.

$refs!: {} is included to declare the type of any refs that appear in the template.

If you prefer scss or any preprocessed css then you may be interested in adding to the end:

<style scoped lang="scss">

</style>

To add it to your Webstorm instance see the official documentation.