Vetur: Using workspace snippets

Vetur is a Visual Studio Code extension that adds support for .vue files as well as many other tools for working with Vue.

One of those is additional built-in snippets, where CTRLSPACE brings up suggestions for file scaffolding with different kinds of templates.

To add project-specific templates, create the folder .vscode/vetur/snippets in your project root.

Adding the file default.vue in that folder will allow you to create a default template that’s suggested for .vue files:

<template>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component({})
export default class ${0} extends Vue {
}
</script>

${0} works the same as in regular Code snippets, allowing you to control the initial cursor position after the template is inserted.

Similarly, you can scope templates, adding the file script/typescript.vue to suggest a template for a script tag in a .vue file:

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component({})
export default class ${0} extends Vue {
}
</script>

To turn off the default snippets for the given project and only suggest workspace snippets, update .vscode/settings.json:

{
  "vetur.completion.scaffoldSnippetSources": {
    "workspace": "from workspace defaults",
    "user": "",
    "vetur": ""
  }
}