In Depth Vue Code Snippets for VS Code

Vue is a wonderful way of creating an easy to learn but powerful user interface with web technologies. But it's easy to forget some of the terminology. Here are some real world Vue code snippets that you can copy and paste into your code.

Just place them into a code snippets file, perhaps called vue.code-snippets, in your Visual Studio Code profile folder. This will be located somewhere (on Windows) like: %AppData%/Roaming/Code/User

Vue SFC (single file component) non-class

This is the standard way to declare a Vue js SFC (single file component). There is no use of any class like structure here. It uses sections like data, methods, and computed. Although this example is for TypeScript, it could just as well be JavaScript.

"Vue.js SFC (non-class)": {
	"scope": "vue",
	"prefix": "csVueSFC",
	"body": [
		"<template>",
		"\t<div>",
		"\t</div>",
		"</template>",
		"",
		"<script lang='ts'>",
		"import Vue from 'vue'",
		"import { GitCentral } from '../model/GitCentral'",
		"",
		"export default Vue.extend({",
		"\tname: '$1',",
		"\tdata() {",
		"\t\treturn {",
		"\t\t${2:someData}: '$3'",
		"\t\t}",
		"\t},",
		"\tprops: [$4],",
		"\tcomputed: {",
		"\t\t${5:dummy}: {",
		"\t\t\tget() {",
		"\t\t\t\t",
		"\t\t\t},",
		"\t\t\tset(newValue) {",
		"\t\t\t\t",
		"\t\t\t},",
		"\t\t},",
		"\t},",
		"\twatch: {",
		"\t\t${6:dummy(newValue: string, oldValue: string)} {",
		"\t\t\t",
		"\t\t},",
		"\t},",
		"\tmethods: {",
		"\t},",
		"\tcomponents: {",
		"\t},",
		"})",
		"</script>",
		"",
		"<style scoped>",
		"</style>",
		""
	],
	"description": "Vershd: Vue.js SFC (non-class)"
}

The end result when you use the code snippet in VS Code will be:

<template>
    <div>
    </div>
</template>

<script lang='ts'>
import Vue from 'vue'
import { GitCentral } from '../model/GitCentral'

export default Vue.extend({
    name: '',
    data() {
        return {
        someData: ''
        }
    },
    props: [],
    computed: {
        dummy: {
            get() {
            },
            set(newValue) {
            },
        },
    },
    watch: {
        dummy(newValue: string, oldValue: string) {
        },
    },
    methods: {
    },
    components: {
    },
})
</script>

<style scoped>
</style>

Vue SFC (single file component) class component

This is the class component version of Vue. Here we need the Vue Property Decorator dependency to fully utilise the power of the class layout. That dependency in turn needs the Vue Class Component which is the base dependency for laying out Vue script sections as a TypeScript class.

"Vue class": {
	"scope": "typescript",
	"prefix": "csVueClass",
	"body": [
		"import { Vue, Component, Prop, Watch, PropSync } from 'vue-property-decorator'",
		"",
		"@Component({",
		"\tcomponents: {",
		"\t},",
		"})",
		"export default class CodeSnippet extends Vue {",
		"\t//#region Vue Data",
		"",
		"\tprivate data1 = false",
		"",
		"\tpublic data2 = ''",
		"",
		"\t//#endregion",
		"",
		"\t//#region Vue Props",
		"",
		"\t@Prop()",
		"\tpublic readonly prop1: string",
		"",
		"\t@PropSync('prop2', { type: Number, default: 0 })",
		"\tpublic prop2Synced: number",
		"",
		"\t//#endregion",
		"",
		"\t//#region Vue Computed Properties",
		"",
		"\tget computedProperty1(): boolean {",
		"\t\treturn this.prop2Synced > 0",
		"\t}",
		"",
		"\tprivate computedProperty2: string",
		"",
		"\tget computed2(): string {",
		"\t\treturn this.computedProperty2",
		"\t}",
		"",
		"\tset computed2(newValue: string) {",
		"\t\tthis.computedProperty2 = newValue",
		"\t}",
		"",
		"\t//#endregion",
		"",
		"\t//#region Vue Watchers",
		"",
		"\t@Watch('prop1')",
		"\tpublic async prop1_Changed(newValue: string) {",
		"\t}",
		"",
		"\t//#endregion",
		"",
		"\t//#region Vue Life Cycle Hooks",
		"",
		"\tpublic mounted() {",
		"\t}",
		"",
		"\t//#endregion",
		"}",
		""
	],
	"description": "Vershd: Vue class"
}

The end result when you use the code snippet in VS Code will be:

import { Vue, Component, Prop, Watch, PropSync } from 'vue-property-decorator'

@Component({
	components: {
	},
})
export default class CodeSnippet extends Vue {
	/* #region Vue Data */

	private data1 = false

	public data2 = ''

	/* #endregion */

	/* #region Vue Props */

	@Prop()
	public readonly prop1: string

	@PropSync('prop2', { type: Number, default: 0 })
	public prop2Synced: number

	/* #endregion */

	/* #region Vue Computed Properties */

	get computedProperty1(): boolean {
		return this.prop2Synced > 0
	}

	private computedProperty2: string

	get computed2(): string {
		return this.computedProperty2
	}

	set computed2(newValue: string) {
		this.computedProperty2 = newValue
	}

	/* #endregion */

	/* #region Vue Watchers */

	@Watch('prop1')
	public async prop1_Changed(newValue: string) {
	}

	/* #endregion */

	/* #region Vue Life Cycle Hooks */

	public mounted() {
	}

	/* #endregion */
}

Conclusion

We hope you found these Vue, JavaScript and TypeScript examples helpful. Good luck and full speed ahead with your software development work in VS Code!

Free

GitBreeze is an effortless Git GUI that's free for use at work, at home, anywhere. It boosts software development. It works on Windows, macOS, and Linux.

Designed for developers who want Git to be simple, our unique UI/UX boosts your software development - learn more and reap the benefits.

Coding help

Designed to improve your software development life, this is a full list of our coding help pages.

There's more to assist you, with Git tips and best software development practices, on our resources page.

We also have this free download to help with Git - our Git cheat sheet

Customers say...

I love any tool that makes my life easier... This is perfect, just the right amount of control. No more, no less. Easy to get started, push and rollback changes... It's a no brainer!
Hayden T.

Free Git GUI

Other platforms