Oscar the owl and Vershd logo
Menu

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",
"",
"\[email protected]()",
"\tpublic readonly prop1: string",
"",
"\[email protected]('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",
"",
"\[email protected]('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!

Effortless Git

Vershd is an effortless Git GUI that boosts software development. It works on Windows, macOS, and Linux. It's free for personal, educational, non-profit and trade union use.

Designed for intermediate and beginner Git users, our unique UI/UX boosts your software development and makes Git simple.

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.
Oscar the owl and Vershd logo
 © 2021 Blightysoft
Made in England
St. George's flag of England, the Union Jack flag of the United Kingdom, the European Union flag, and the United Nations flag.
chevron-right linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram