diff --git a/README.md b/README.md
index 1c8d6cd..3ca8e51 100644
--- a/README.md
+++ b/README.md
@@ -30,26 +30,11 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
 
 ## Snippets
 
-### Script
+### Vue
 
 | Snippet                | Purpose             |
 | ---------------------- | ------------------- |
 | `vbase`                | Single file component base |
-| `vdata`                | Component data as a function |
-| `vmethod`              | Vue method |
-| `vcomputed`            | Vue computed property |
-| `vwatcher`             | Vue watcher with new and old value args |
-| `vprops`               | Props with type and default |
-| `vimport`              | Import one component into another |
-| `vimport-c`            | Import one component into another within the export statement |
-| `vimport-export`       | Import one component into another and use it within the export statement |
-| `vfilter`              | Vue filter |
-| `vmixin`               | Create a Vue Mixin |
-| `vmixin-use`           | Bring a mixin into a component to use |
-| `vc-direct`            | Vue create a custom directive |
-| `vimport-lib`          | Import a library |
-| `vimport-gsap`         | Import GreenSock with Timeline and Eases |
-| `vanimhook-js`         | Using the Transition component JS hooks in methods |
 
 ### Template
 
@@ -68,12 +53,34 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
 | `vclass-obj-mult`      | Multiple conditional class bindings |
 | `vanim`                | Transition component with JS hooks |
 
+### Script
+
+| Snippet                | Purpose             |
+| ---------------------- | ------------------- |
+| `vdata`                | Component data as a function |
+| `vmethod`              | Vue method |
+| `vcomputed`            | Vue computed property |
+| `vwatcher`             | Vue watcher with new and old value args |
+| `vprops`               | Props with type and default |
+| `vimport`              | Import one component into another |
+| `vimport-c`            | Import one component into another within the export statement |
+| `vimport-export`       | Import one component into another and use it within the export statement |
+| `vfilter`              | Vue filter |
+| `vmixin`               | Create a Vue Mixin |
+| `vmixin-use`           | Bring a mixin into a component to use |
+| `vc-direct`            | Vue create a custom directive |
+| `vimport-lib`          | Import a library |
+| `vimport-gsap`         | Import GreenSock with Timeline and Eases |
+| `vanimhook-js`         | Using the Transition component JS hooks in methods |
+| `vinc`                 | incrementer |
+| `vdec`                 | decrementer |
+
 ### Vuex
 
 | Snippet                | Purpose             |
 | ---------------------- | ------------------- |
 | `vstore`               | Base for Vuex store.js |
-| `vgetters`             | Vuex Getter |
+| `vgetter`              | Vuex Getter |
 | `vmutation`            | Vuex Mutation |
 | `vaction`              | Vuex Action |
 | `vstore-import`        | Import vuex store into main.js |
@@ -83,8 +90,6 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
 | Snippet                | Purpose             |
 | ---------------------- | ------------------- |
 | `gitignore`            | .gitignore file presets |
-| `vinc`                 | incrementer |
-| `vdec`                 | decrementer |
 
 
 ## Contributing
diff --git a/package.json b/package.json
index 16d4e8a..633a379 100644
--- a/package.json
+++ b/package.json
@@ -30,12 +30,24 @@
                 "path": "./snippets/vue.json"
             },
             {
-                "language": "plaintext",
-                "path": "./snippets/plaintext.json"
+                "language": "html",
+                "path": "./snippets/vue-template.json"
+            },
+            {
+                "language": "vue-html",
+                "path": "./snippets/vue-template.json"
             },
             {
                 "language": "javascript",
-                "path": "./snippets/vue.json"
+                "path": "./snippets/vue-script.json"
+            },
+            {
+                "language": "javascript",
+                "path": "./snippets/vue-script-vuex.json"
+            },
+            {
+                "language": "plaintext",
+                "path": "./snippets/plaintext.json"
             }
         ]
     }
diff --git a/snippets/vue-script-vuex.json b/snippets/vue-script-vuex.json
new file mode 100644
index 0000000..d562fbe
--- /dev/null
+++ b/snippets/vue-script-vuex.json
@@ -0,0 +1,58 @@
+{
+	"Vuex Store": {
+		"prefix": "vstore",
+		"body": [
+			"import Vue from 'vue';",
+			"import Vuex from 'vuex';",
+			"",
+			"Vue.use(Vuex);",
+			"",
+			"export const store = new Vuex.Store({",
+			"\tstate: {",
+			"\t\t${1:key}: ${2:value}",
+			"\t}",
+			"});"
+		],
+		"description": "Base for Vuex store"
+  },
+	"Vuex Getters": {
+		"prefix": "vgetter",
+		"body": [
+			"getters: {",
+			"\tvalue: ${1:value} => {",
+			"\t\treturn state.${1:value};",
+			"\t}",
+			"}"
+		],
+		"description": "vuex getter"
+	},
+	"Vuex Mutation": {
+		"prefix": "vmutation",
+		"body": [
+			"mutations: {",
+			"\t${1:updateValue}(state, ${3:payload}) {",
+			"\t\tstate.${2:value} = ${3:payload};",
+			"\t}",
+			"}"
+		],
+		"description": "vuex mutation"
+	},
+	"Vuex Action": {
+		"prefix": "vaction",
+		"body": [
+			"actions: {",
+			"\t${1:updateValue}({commit}, ${2:payload}) {",
+			"\t\tcommit(${1:updateValue}, ${2:payload});",
+			"\t}",
+			"}"
+		],
+		"description": "vuex action"
+  },
+	"Vue Import Vuex Store": {
+		"prefix": "vstore-import",
+		"body": [
+			"import { store } from './store/store';"
+		],
+		"description": "import vuex store into main.js"
+	}
+}
\ No newline at end of file
diff --git a/snippets/vue-script.json b/snippets/vue-script.json
new file mode 100644
index 0000000..c1241a1
--- /dev/null
+++ b/snippets/vue-script.json
@@ -0,0 +1,177 @@
+{
+	"Vue Data": {
+		"prefix": "vdata",
+		"body": [
+			"data() {",
+			"\treturn {",
+			"\t\t${1:key}: ${2:value}",
+			"\t}",
+			"},"
+		],
+		"description": "Vue Component Data"
+	},
+	"Vue Methods": {
+		"prefix": "vmethod",
+		"body": [
+			"methods: {",
+			"\t${1:name}() {",
+			"\t\t${0}",
+			"\t}",
+			"},"
+		],
+		"description": "vue method"
+	},
+	"Vue Computed": {
+		"prefix": "vcomputed",
+		"body": [
+			"computed: {",
+			"\t${1:name}() {",
+			"\t\treturn this.${2:data} ${0}",
+			"\t}",
+			"},"
+		],
+		"description": "computed value"
+	},
+	"Vue Watchers": {
+		"prefix": "vwatcher",
+		"body": [
+			"watch: {",
+			"\t${1:data}(${2:newValue}, ${3:oldValue}) {",
+			"\t\t${0}",
+			"\t}",
+			"},"
+		],
+		"description": "vue watcher"
+	},
+	"Vue Props with Default": {
+		"prefix": "vprops",
+		"body": [
+			"props: {",
+			"\t${1:propName}: {",
+			"\t\ttype: ${2:number},",
+			"\t\tdefault: ${0}",
+			"\t},",
+			"},"
+		],
+		"description": "Vue Props with Default"
+	},
+	"Vue Import File": {
+		"prefix": "vimport",
+		"body": [
+			"import ${1:New} from './components/${1:New}.vue';"
+		],
+		"description": "Import one component into another"
+	},
+	"Vue Import into the Component": {
+		"prefix": "vimport-c",
+		"body": [
+			"components: {",
+			"\t${1:New},",
+			"}"
+		],
+		"description": "Import one component into another, within export statement"
+	},
+	"Vue Import Export": {
+		"prefix": "vimport-export",
+		"body": [
+			"import ${1:Name} from '~components/${1:Name}.vue'",
+			"",
+			"export default {",
+			"\tcomponents: {",
+			"\t\t${1:Name}",
+			"\t},",
+			"}"
+		],
+		"description": "import a component and include it in export default"
+	},
+	"Vue Filter": {
+		"prefix": "vfilter",
+		"body": [
+			"filters: {",
+			"\t${1:fnName}: function(${2:value}) {",
+			"\t\treturn ${2:value}${0};",
+			"\t}",
+			"}"
+		],
+		"description": "vue filter"
+	},
+	"Vue Mixin": {
+		"prefix": "vmixin",
+		"body": [
+			"const ${1:mixinName} = {",
+			"\tmounted() {",
+			"\t\tconsole.log('hello from mixin!')",
+			"\t},",
+			"}"
+		],
+		"description": "vue mixin"
+	},
+	"Vue Use Mixin": {
+		"prefix": "vmixin-use",
+		"body": [
+			"mixins: [${1:mixinName}]"
+		],
+		"description": "vue use mixin"
+	},
+	"Vue Custom Directive": {
+		"prefix": "vc-direct",
+		"body": [
+			"Vue.directive('${1:directiveName}', {",
+			"\tbind(el, binding, vnode) {",
+			"\t\tel.style.${2:arg} = binding.value.${2:arg};",
+			"\t}",
+			"});"
+		],
+		"description": "vue custom directive"
+	},
+	"Vue Import Library": {
+		"prefix": "vimport-lib",
+		"body": [
+			"import { ${1:libName} } from '${1:libName}'"
+		],
+		"description": "import a library"
+	},
+	"Vue Import GSAP": {
+		"prefix": "vimport-gsap",
+		"body": [
+			"import { TimelineMax, ${1:Ease} } from 'gsap'"
+		],
+		"description": "component methods options that dispatch an action from vuex store."
+	},
+	"Vue Transition Methods with JavaScript Hooks": {
+		"prefix": "vanimhook-js",
+		"body": [
+			"methods: {",
+			"\tbeforeEnter(el) {",
+			"\t\tconsole.log('beforeEnter');",
+			"\t},",
+			"\tenter(el, done) {",
+			"\t\tconsole.log('enter');",
+			"\t\tdone();",
+			"\t},",
+			"\tbeforeLeave(el) {",
+			"\t\tconsole.log('beforeLeave');",
+			"\t}," ,
+			"\tleave(el, done) {",
+			"\t\tconsole.log('leave');",
+			"\t\tdone();",
+			"\t},",
+			"},"
+		],
+		"description": "transition component js hooks"
+	},
+	"Incrementer": {
+		"prefix": "vinc",
+		"body": [
+			"return ${1:this.num} += ${2:1}"
+		],
+		"description": "increment"
+	},
+	"Decrementer": {
+		"prefix": "vdec",
+		"body": [
+			"return ${1:this.num} -= ${2:1}"
+		],
+		"description": "decrement"
+	}
+}
\ No newline at end of file
diff --git a/snippets/vue-template.json b/snippets/vue-template.json
new file mode 100644
index 0000000..c686ab0
--- /dev/null
+++ b/snippets/vue-template.json
@@ -0,0 +1,97 @@
+{
+	"Vue v-for": {
+		"prefix": "vfor",
+		"body": [
+			"<${1:div} v-for=\"${2:item} in ${2:item}s\" :key=\"${2:item}.id\">",
+			"\t{{ ${2:item} }}",
+			"</${1:div}>"
+		],
+		"description": "vfor statement"
+	},
+	"Vue v-model Directive": {
+		"prefix": "vmodel",
+		"body": [
+			"<input v-model=\"${1:data}\" type=\"text\" />"
+		],
+		"description": "v-model directive"
+	},
+	"Vue v-model Number Directive": {
+		"prefix": "vmodel-num",
+		"body": [
+			"<input v-model.number=\"${1:numData}\" type=\"number\" step=\"1\" />"
+		],
+		"description": "v-model directive number input"
+	},
+	"Vue v-on Shortcut Directive": {
+		"prefix": "von",
+		"body": [
+			"@click=\"${1:handler}(${2:arg}, $event)\""
+		],
+		"description": "v-on click handler with arguments"
+	},
+	"Vue Component with Props Binding": {
+		"prefix": "vel-props",
+		"body": [
+			"<${1:component} :${1:propName}=\"${0}\"></${1:component}>"
+		],
+		"description": "component element with props"
+	},
+	"Vue Image Source Binding": {
+		"prefix": "vsrc",
+		"body": [
+			"<img :src=\"'/path/to/images/' + ${1:fileName}\" alt=\"${2:altText}\"/>"
+		],
+		"description": "image source binding"
+	},
+	"Vue Style Binding": {
+		"prefix": "vstyle",
+		"body": [
+			"<${1:div} :style=\"{ fontSize: ${2:data} + 'px' }\"></${1:div}>"
+		],
+		"description": "vue inline style binding"
+	},
+	"Vue Style Binding Object": {
+		"prefix": "vstyle-obj",
+		"body": [
+			"<${1:div} :style=\"[${2:styleObjectA}, ${3:styleObjectB]}\"></${1:div}>"
+		],
+		"description": "vue inline style binding, objects"
+	},
+	"Vue Class Binding": {
+		"prefix": "vclass",
+		"body": [
+			"<${1:div} :class=\"{ ${2:className}: ${3:data} }\"></${1:div}>"
+		],
+		"description": "vue class binding"
+	},
+	"Vue Class Binding Object": {
+		"prefix": "vclass-obj",
+		"body": [
+			"<${1:div} :class=\"[${2:classNameA}, ${3:classNameB}]\"></${1:div}>"
+		],
+		"description": "vue class binding"
+	},
+	"Vue Multiple Conditional Class Bindings": {
+		"prefix": "vclass-obj-mult",
+		"body": [
+			"<${1:div} :class=\"[${2:classNameA}, {${3:classNameB} : ${4:condition}}]\"></${1:div}>"
+		],
+		"description": "vue multiple conditional class bindings"
+	},
+	"Vue Transition Component with JavaScript Hooks": {
+		"prefix": "vanim",
+		"body": [
+			"<transition", 
+			"\tmode=\"out-in\"",
+			"\t@before-enter=\"beforeEnter\"",
+			"\t@enter=\"enter\"",
+			"",
+			"\t@before-leave=\"beforeLeave\"",
+			"\t@leave=\"leave\"",
+			"\t:css=\"false\">",
+			"",
+		  "</transition>"
+		],
+		"description": "transition component js hooks"
+  }
+}
\ No newline at end of file
diff --git a/snippets/vue.json b/snippets/vue.json
index 14b089e..90c9b02 100644
--- a/snippets/vue.json
+++ b/snippets/vue.json
@@ -19,332 +19,6 @@
 			"</style>"
 		],
 		"description": "Base for Vue File"
-	},
-	"Vue Data": {
-		"prefix": "vdata",
-		"body": [
-			"data() {",
-			"\treturn {",
-			"\t\t${1:key}: ${2:value}",
-			"\t}",
-			"},"
-		],
-		"description": "Vue Component Data"
-	},
-	"Vuex Store": {
-		"prefix": "vstore",
-		"body": [
-			"import Vue from 'vue';",
-			"import Vuex from 'vuex';",
-			"",
-			"Vue.use(Vuex);",
-			"",
-			"export const store = new Vuex.Store({",
-			"\tstate: {",
-			"\t\t${1:key}: ${2:value}",
-			"\t}",
-			"});"
-		],
-		"description": "Base for Vuex store"
-	},
-	"Vue Props with Default": {
-		"prefix": "vprops",
-		"body": [
-			"props: {",
-			"\t${1:propName}: {",
-			"\t\ttype: ${2:number},",
-			"\t\tdefault: ${0}",
-			"\t},",
-			"},"
-		],
-		"description": "Vue Props with Default"
-	},
-	"Vue Import File": {
-		"prefix": "vimport",
-		"body": [
-			"import ${1:New} from './components/${1:New}.vue';"
-		],
-		"description": "Import one component into another"
-	},
-	"Vue Import into the Component": {
-		"prefix": "vimport-c",
-		"body": [
-			"components: {",
-			"\t${1:New},",
-			"}"
-		],
-		"description": "Import one component into another, within export statement"
-	},
-	"Vue Import Export": {
-		"prefix": "vimport-export",
-		"body": [
-			"import ${1:Name} from '~components/${1:Name}.vue'",
-			"",
-			"export default {",
-			"\tcomponents: {",
-			"\t\t${1:Name}",
-			"\t},",
-			"}"
-		],
-		"description": "import a component and include it in export default"
-	},
-	"Vue v-for": {
-		"prefix": "vfor",
-		"body": [
-			"<${1:div} v-for=\"${2:item} in ${2:item}s\" :key=\"${2:item}.id\">",
-			"\t{{ ${2:item} }}",
-			"</${1:div}>"
-		],
-		"description": "vfor statement"
-	},
-	"Vue Transition Methods with JavaScript Hooks": {
-		"prefix": "vanimhook-js",
-		"body": [
-			"methods: {",
-			"\tbeforeEnter(el) {",
-			"\t\tconsole.log('beforeEnter');",
-			"\t},",
-			"\tenter(el, done) {",
-			"\t\tconsole.log('enter');",
-			"\t\tdone();",
-			"\t},",
-			"\tbeforeLeave(el) {",
-			"\t\tconsole.log('beforeLeave');",
-			"\t}," ,
-			"\tleave(el, done) {",
-			"\t\tconsole.log('leave');",
-			"\t\tdone();",
-			"\t},",
-			"},"
-		],
-		"description": "transition component js hooks"
-	},
-	"Vuex Getters": {
-		"prefix": "vgetter",
-		"body": [
-			"getters: {",
-			"\tvalue: ${1:value} => {",
-			"\t\treturn state.${1:value};",
-			"\t}",
-			"}"
-		],
-		"description": "vuex getter"
-	},
-	"Vuex Mutation": {
-		"prefix": "vmutation",
-		"body": [
-			"mutations: {",
-			"\t${1:updateValue}(state, ${3:payload}) {",
-			"\t\tstate.${2:value} = ${3:payload};",
-			"\t}",
-			"}"
-		],
-		"description": "vuex mutation"
-	},
-	"Vuex Action": {
-		"prefix": "vaction",
-		"body": [
-			"actions: {",
-			"\t${1:updateValue}({commit}, ${2:payload}) {",
-			"\t\tcommit(${1:updateValue}, ${2:payload});",
-			"\t}",
-			"}"
-		],
-		"description": "vuex action"
-	},
-	"Vue Filter": {
-		"prefix": "vfilter",
-		"body": [
-			"filters: {",
-			"\t${1:fnName}: function(${2:value}) {",
-			"\t\treturn ${2:value}${0};",
-			"\t}",
-			"}"
-		],
-		"description": "vue filter"
-	},
-	"Vue Mixin": {
-		"prefix": "vmixin",
-		"body": [
-			"const ${1:mixinName} = {",
-			"\tmounted() {",
-			"\t\tconsole.log('hello from mixin!')",
-			"\t},",
-			"}"
-		],
-		"description": "vue mixin"
-	},
-	"Vue Use Mixin": {
-		"prefix": "vmixin-use",
-		"body": [
-			"mixins: [${1:mixinName}]"
-		],
-		"description": "vue use mixin"
-	},
-	"Vue Custom Directive": {
-		"prefix": "vc-direct",
-		"body": [
-			"Vue.directive('${1:directiveName}', {",
-			"\tbind(el, binding, vnode) {",
-			"\t\tel.style.${2:arg} = binding.value.${2:arg};",
-			"\t}",
-			"});"
-		],
-		"description": "vue custom directive"
-	},
-	"Vue Methods": {
-		"prefix": "vmethod",
-		"body": [
-			"methods: {",
-			"\t${1:name}() {",
-			"\t\t${0}",
-			"\t}",
-			"},"
-		],
-		"description": "vue method"
-	},
-	"Vue Computed": {
-		"prefix": "vcomputed",
-		"body": [
-			"computed: {",
-			"\t${1:name}() {",
-			"\t\treturn this.${2:data} ${0}",
-			"\t}",
-			"},"
-		],
-		"description": "computed value"
-	},
-	"Vue Watchers": {
-		"prefix": "vwatcher",
-		"body": [
-			"watch: {",
-			"\t${1:data}(${2:newValue}, ${3:oldValue}) {",
-			"\t\t${0}",
-			"\t}",
-			"},"
-		],
-		"description": "vue watcher"
-	},
-	"Vue Import Vuex Store": {
-		"prefix": "vstore-import",
-		"body": [
-			"import { store } from './store/store';"
-		],
-		"description": "import vuex store into main.js"
-	},
-	"Vue Import Library": {
-		"prefix": "vimport-lib",
-		"body": [
-			"import { ${1:libName} } from '${1:libName}'"
-		],
-		"description": "import a library"
-	},
-	"Vue Import GSAP": {
-		"prefix": "vimport-gsap",
-		"body": [
-			"import { TimelineMax, ${1:Ease} } from 'gsap'"
-		],
-		"description": "component methods options that dispatch an action from vuex store."
-	},
-	"Vue v-model Directive": {
-		"prefix": "vmodel",
-		"body": [
-			"<input v-model=\"${1:data}\" type=\"text\" />"
-		],
-		"description": "v-model directive"
-	},
-	"Vue v-model Number Directive": {
-		"prefix": "vmodel-num",
-		"body": [
-			"<input v-model.number=\"${1:numData}\" type=\"number\" step=\"1\" />"
-		],
-		"description": "v-model directive number input"
-	},
-	"Vue v-on Shortcut Directive": {
-		"prefix": "von",
-		"body": [
-			"@click=\"${1:handler}(${2:arg}, $event)\""
-		],
-		"description": "v-on click handler with arguments"
-	},
-	"Vue Component with Props Binding": {
-		"prefix": "vel-props",
-		"body": [
-			"<${1:component} :${1:propName}=\"${0}\"></${1:component}>"
-		],
-		"description": "component element with props"
-	},
-	"Vue Image Source Binding": {
-		"prefix": "vsrc",
-		"body": [
-			"<img :src=\"'/path/to/images/' + ${1:fileName}\" alt=\"${2:altText}\"/>"
-		],
-		"description": "image source binding"
-	},
-	"Vue Style Binding": {
-		"prefix": "vstyle",
-		"body": [
-			"<${1:div} :style=\"{ fontSize: ${2:data} + 'px' }\"></${1:div}>"
-		],
-		"description": "vue inline style binding"
-	},
-	"Vue Style Binding Object": {
-		"prefix": "vstyle-obj",
-		"body": [
-			"<${1:div} :style=\"[${2:styleObjectA}, ${3:styleObjectB]}\"></${1:div}>"
-		],
-		"description": "vue inline style binding, objects"
-	},
-	"Vue Class Binding": {
-		"prefix": "vclass",
-		"body": [
-			"<${1:div} :class=\"{ ${2:className}: ${3:data} }\"></${1:div}>"
-		],
-		"description": "vue class binding"
-	},
-	"Vue Class Binding Object": {
-		"prefix": "vclass-obj",
-		"body": [
-			"<${1:div} :class=\"[${2:classNameA}, ${3:classNameB}]\"></${1:div}>"
-		],
-		"description": "vue class binding"
-	},
-	"Vue Multiple Conditional Class Bindings": {
-		"prefix": "vclass-obj-mult",
-		"body": [
-			"<${1:div} :class=\"[${2:classNameA}, {${3:classNameB} : ${4:condition}}]\"></${1:div}>"
-		],
-		"description": "vue multiple conditional class bindings"
-	},
-	"Vue Transition Component with JavaScript Hooks": {
-		"prefix": "vanim",
-		"body": [
-			"<transition", 
-			"\tmode=\"out-in\"",
-			"\t@before-enter=\"beforeEnter\"",
-			"\t@enter=\"enter\"",
-			"",
-			"\t@before-leave=\"beforeLeave\"",
-			"\t@leave=\"leave\"",
-			"\t:css=\"false\">",
-			"",
-		  "</transition>"
-		],
-		"description": "transition component js hooks"
-	},
-	"Incrementer": {
-		"prefix": "vinc",
-		"body": [
-			"return ${1:this.num} += ${2:1}"
-		],
-		"description": "increment"
-	},
-	"Decrementer": {
-		"prefix": "vdec",
-		"body": [
-			"return ${1:this.num} -= ${2:1}"
-		],
-		"description": "decrement"
 	}
 }