Vue3 Typescript Jetbrains Template

This is an update of my original post for Vue 3. The only real change is the Component decorator has been changed out for Options. See the Vue 3 support issue for details about the change.

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 { Options, Prop, Watch, Vue } from 'vue-property-decorator';

@Options({ 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.