diff --git a/CHANGELOG.md b/CHANGELOG.md index 6a64ba5..53ef5f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,74 @@ -# Change Log +# Changelog All notable changes to the "vue-vscode-snippets" extension will be documented in this file. -Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file. +## 3.2.0 + +- Add base script setup blocks for Vue 3 +- Update README with new snippets + +## 3.1.1 + +- Update README + +## 3.1.0 + +- Remove any extension dependencies + +## 3.0.0 + +- Vetur -> Volar, extension dependencies + +## 2.2.1 + +- remove name of package for composition api now that we're at vue 3 + +## 2.2.0 + +- Add in Nuxt axios module +- Fix bug in emit- wrong snippet area +- Update TS reference +- Fix typo in README + +## 2.1.5 + +- Fix bug: fix dollar signs in emit + +## 2.1.4 + +- Fix bug: put emit into template instead of script + +## 2.1.3 + +- Add in boilerplate to use Composition API inside Options API + +## 2.1.2 + +- Add in Vue 3 Composition API with Reactive boilerplate script + +## 2.1.1 + +- Update readme to reflect Vue 3 support + +## 2.1.0 + +- Further Vue 3 Composition API support +- Adds in Emit +- Adds in named slot +- Better TypeScript support +- Removes increment/decrement +- Updates gsap + +## 2.0.0 + +- Vue 3 Composition API support + +## 1.9.0 + +- New vbase support: LESS, SASS, Stylus, no CSS +- Fix pug support +- Fix brackets on vue router +- New snippets: Nuxt page snippets ## 1.8.0 diff --git a/LICENSE b/LICENSE index a5414ee..dd378c9 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2017 Sarah Drasner +Copyright (c) 2022 Sarah Drasner Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 2d83980..b71ff08 100644 --- a/README.md +++ b/README.md @@ -4,11 +4,11 @@ ## Description -These snippets were built to supercharge my workflow in the most seamless manner possible. +These snippets were built to supercharge a workflow in the most seamless manner possible. -This repo was built particularly for real world use. It doesn't catalogue the API definitions, and it's not a kitchen sink approach. Rather, it focuses on developer ergonomics from the point of Vue of real world use. Included are the pieces I personally get sick of typing, have to keep looking up, or forget to consider while developing that I make more use of when they're at my fingertips. +This repo was built particularly for real world use. It doesn't catalogue the API definitions, rather, it focuses on developer ergonomics from the point of Vue of real world use. Included are the pieces I personally get sick of typing, and boilerplate that is helpful to stub out quickly. -_Current version: Vue2_ +_Versions Supported: Vue 2 and Vue 3_ ![SnippetDemo](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/SnippetDemo.gif) @@ -32,13 +32,27 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set ### Vue -| Snippet | Purpose | -| ----------- | ------------------------------------------ | -| `vbase` | Single file component base with SCSS | -| `vbase-css` | Single file component base with CSS | -| `vbase-pcss`| Single file component base with PostCSS | -| `vbase-ts` | Single file component base with Typescript | -| `vbase-ns` | Single file component with no styles | +These snippets are meant to provide a base scaffold for your single file components (SFC). + +| Snippet | Purpose | +| ------------------ | ------------------------------------------ | +| `vbase-3-ss` | SFC base with script setup | +| `vbase-3-ss-ts` | SFC base with script setup and TypeScript | +| `vbase` | SFC base with SCSS | +| `vbase-3` | SFC Composition API with SCSS | +| `vbase-3-setup` | SFC setup Composition API with SCSS | +| `vbase-3-setup` | SFC setup Composition API with SCSS | +| `vbase-3-reactive` | SFC Composition API with Reactive and SCSS | +| `vbase-css` | SFC base with CSS | +| `vbase-pcss` | SFC base with PostCSS | +| `vbase-styl` | SFC base with Stylus | +| `vbase-ts` | SFC base with Typescript | +| `vbase-ts-class` | SFC base with Typescript Class Format | +| `vbase-3-ts` | SFC Composition API with Typescript | +| `vbase-3-ts-setup` | SFC setup Composition API with Typescript | +| `vbase-ns` | SFC with no styles | +| `vbase-sass` | SFC base with SASS | +| `vbase-less` | SFC base with LESS | ### Template @@ -48,6 +62,7 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set | `vmodel` | Semantic v-model directive | | `vmodel-num` | Semantic v-model number directive | | `von` | v-on click handler with arguments | +| `vslot-named` | Named slot | | `vel-props` | Component element with props | | `vsrc` | Image src binding | | `vstyle` | Inline style binding | @@ -60,44 +75,64 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set | `vroutename` | router-link Named Routing | | `vroutenameparam` | router-link Named with Parameters | | `vroutepath` | router-link Path Routing Link | +| `vemit-child` | Emit event from child component | +| `vemit-parent` | Emit event to parent component | ### 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 | -| `vbeforecreate` | beforeCreate lifecycle method | -| `vcreated` | created lifecycle method | -| `vbeforemount` | beforeMount lifecycle method | -| `vmounted` | vmounted lifecycle method | -| `vbeforeupdate` | beforeUpdate lifecycle method | -| `vupdated` | updated lifecycle method | -| `vbeforedestroy` | beforeDestroy lifecycle method | -| `vdestroyed` | destroyed lifecycle method | -| `vprops` | Props with type and default | -| `vimport` | Import one component into another | -| `vcomponents` | Import one component into another within the export statement | -| `vimport-export` | Import one component into another and use it within the export statement | -| `vmapstate` | import mapState from Vuex into vue component component | -| `vmapgetters` | import mapGetters from Vuex into vue component component | -| `vmapmutations` | import mapMutations from Vuex into vue component component | -| `vmapactions` | import mapActions from Vuex into vue component component | -| `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 | -| `vcommit` | Commit to Vuex store in methods for mutation | -| `vdispatch` | Dispatch to Vuex store in methods for action | -| `vtest` | A simple unit testing component | -| `vinc` | incrementer | -| `vdec` | decrementer | -| `vconfig` | vue.config.js file, example imports a sass file into every component | +| Snippet | Purpose | +| ----------------- | ------------------------------------------------------------------------ | +| `vdata` | Component data as a function | +| `vmethod` | Vue method | +| `vcomputed` | Vue computed property | +| `vwatcher` | Vue watcher with new and old value args | +| `vbeforecreate` | beforeCreate lifecycle method | +| `vcreated` | created lifecycle method | +| `vbeforemount` | beforeMount lifecycle method | +| `vmounted` | vmounted lifecycle method | +| `vbeforeupdate` | beforeUpdate lifecycle method | +| `vupdated` | updated lifecycle method | +| `vbeforedestroy` | beforeDestroy lifecycle method | +| `vdestroyed` | destroyed lifecycle method | +| `vprops` | Props with type and default | +| `vimport` | Import one component into another | +| `vimport-dynamic` | Import one component that should be lazy loaded by webpack | +| `vcomponents` | Import one component into another within the export statement | +| `vimport-export` | Import one component into another and use it within the export statement | +| `vmapstate` | import mapState from Vuex into vue component component | +| `vmapgetters` | import mapGetters from Vuex into vue component component | +| `vmapmutations` | import mapMutations from Vuex into vue component component | +| `vmapactions` | import mapActions from Vuex into vue component component | +| `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 | +| `vanimhook-js` | Using the Transition component JS hooks in methods | +| `vcommit` | Commit to Vuex store in methods for mutation | +| `vdispatch` | Dispatch to Vuex store in methods for action | +| `vtest` | A simple unit testing component | + +### Vue Composition API + +| Snippet | Purpose | +| ------------------- | ----------------------------------------------------- | +| `v3reactive` | Vue Composition API - reactive | +| `v3reactive-setup` | Vue Composition API - reactive with setup boilerplate | +| `v3computed` | Vue Composition API - computed | +| `v3watch` | Vue Composition API - watcher single source | +| `v3watch-array` | Vue Composition API - watch as array | +| `v3watcheffect` | Vue Composition API - watchEffect | +| `v3ref` | Vue Ref | +| `v3onmounted` | Lifecycle hook - onMounted | +| `v3onbeforemount` | Lifecycle hook - onBeforeMount | +| `v3onbeforeupdate` | Lifecycle hook - onBeforeUpdate | +| `v3onupdated` | Lifecycle hook - onUpdated | +| `v3onerrorcaptured` | Lifecycle hook - onErrorCaptured | +| `v3onunmounted` | Lifecycle hook - (destroyed) onUnmounted | +| `v3onbeforeunmount` | Lifecycle hook - (beforeDestroy) onBeforeUnmount | +| `v3useinoptions` | Use Composition API in Options API | ### Vuex @@ -125,6 +160,13 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set | `vbeforerouteupdate` | Vue Router component guards beforeRouteUpdate | | `vbeforerouteleave` | Vue Router component guards beforeRouteLeave | +### Vue Config + +| Snippet | Purpose | +| --------- | -------------------------------------------------------------------- | +| `vplugin` | Import a plugin to main.js or plugins file | +| `vconfig` | vue.config.js file, example imports a sass file into every component | + ### Nuxt Config | Snippet | Purpose | @@ -132,6 +174,17 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set | `nfont` | link to include fonts in a nuxt project, in nuxt-config | | `ncss` | link to css assets such as normalize | +### Nuxt Page + +| Snippet | Purpose | +| ----------------- | -------------------------------- | +| `nasyncdata` | Nuxt asyncData | +| `nasyncdataaxios` | Nuxt asyncData with Axios module | +| `nfetch` | Nuxt Fetch | +| `nfetchaxios` | Nuxt Fetch with Axios module | +| `nhead` | Nuxt Head | +| `nparam` | Nuxt Route Params | + ### Extra (plaintext) | Snippet | Purpose | @@ -141,3 +194,5 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set ## Contributing This is an open source project open to anyone. Contributions are welcome [github](https://github.com/sdras/vue-vscode-snippets) + +If you are contributing a snippet, please be sure to add the documentation for it in the tables in the README, the pull request cannot be accepted without this addition. Thanks! diff --git a/package.json b/package.json index c0947f0..c9f44b3 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "displayName": "Vue VSCode Snippets", "description": "Snippets that will supercharge your Vue workflow", "icon": "images/vue-logo.png", - "version": "1.8.0", + "version": "3.2.0", "publisher": "sdras", "engines": { "vscode": "^1.14.0" @@ -18,12 +18,11 @@ }, "keywords": [ "Vue", + "Vue 3", "Vue 2", + "Composition API", "Vue Snippets" ], - "extensionDependencies": [ - "octref.vetur" - ], "categories": [ "Snippets" ], @@ -33,6 +32,10 @@ "language": "vue", "path": "./snippets/vue.json" }, + { + "language": "jade", + "path": "./snippets/vue-pug.json" + }, { "language": "html", "path": "./snippets/vue-template.json" @@ -45,6 +48,10 @@ "language": "javascript", "path": "./snippets/vue-script.json" }, + { + "language": "javascript", + "path": "./snippets/vue-script-setup.json" + }, { "language": "javascript", "path": "./snippets/vue-script-vuex.json" @@ -57,6 +64,10 @@ "language": "javascript", "path": "./snippets/nuxt-config.json" }, + { + "language": "javascript", + "path": "./snippets/nuxt-script.json" + }, { "language": "typescript", "path": "./snippets/vue-script.json" @@ -72,10 +83,6 @@ { "language": "typescript", "path": "./snippets/nuxt-config.json" - }, - { - "language": "plaintext", - "path": "./snippets/plaintext.json" } ] } diff --git a/snippets/nuxt-script.json b/snippets/nuxt-script.json new file mode 100644 index 0000000..34ab955 --- /dev/null +++ b/snippets/nuxt-script.json @@ -0,0 +1,61 @@ +{ + "Nuxt Async": { + "prefix": "nasyncdata", + "body": [ + "async asyncData ({ ${1:params} }) {", + "\tconst { data } = await fetch(`${2:endpoint}`).then(res => res.json())", + "\treturn { ${3:key}:${4:value} }", + "}," + ], + "description": "Nuxt asyncData" + }, + "Nuxt Async": { + "prefix": "nasyncdataaxios", + "body": [ + "async asyncData ({ ${1:$axios}, { ${2:params} }) {", + "\tconst data = await $axios.$get(`${3:endpoint/${params.slug}}`)", + "\treturn { data }", + "}," + ], + "description": "Nuxt asyncData with Axios module" + }, + "Nuxt Fetch": { + "prefix": "nfetch", + "body": [ + "async fetch ({ store, ${1:params} }) {", + "\tlet { data } = await fetch('${2:endpoint}').then(res => res.json())", + "\tstore.commit('${3:MUTATION_TYPE}', data)", + "}," + ], + "description": "Nuxt Fetch" + }, + "Nuxt Fetch with Axios": { + "prefix": "nfetchaxios", + "body": [ + "async fetch () {", + "\tlet this.data = await this.$axios.$get('${1:endpoint/${this.$route.params.slug}}')", + "}," + ], + "description": "Nuxt Fetch with Axios module" + }, + "Nuxt Route Params": { + "prefix": "nparam", + "body": ["this.$route.params.${1:id}"], + "description": "Nuxt Route Params" + }, + "Nuxt Head": { + "prefix": "nhead", + "body": [ + "head () {", + "\treturn {", + "\t\ttitle: ${1:'Page Title'},", + "\t\tmeta: [", + "\t\t\t// hid is used as unique identifier. Do not use `vmid` for it as it will not work", + "\t\t\t{ hid: 'description', name: 'description', content: ${2:'My custom description'} }", + "\t\t]", + "\t}", + "}," + ], + "description": "Nuxt Head" + } +} diff --git a/snippets/vue-pug.json b/snippets/vue-pug.json index a995ef6..d601d3a 100644 --- a/snippets/vue-pug.json +++ b/snippets/vue-pug.json @@ -82,5 +82,15 @@ "prefix": "vnuxtl", "body": ["nuxt-link(to=\"/${1:page}\") ${1:page}"], "description": "nuxt routing link" + }, + "Vue Emit from Child": { + "prefix": "vemit-child", + "body": ["@change=\"$emit('change', $event.target.value)\""], + "description": "Vue Emit from Child Component" + }, + "Vue Emit to Parent": { + "prefix": "vemit-parent", + "body": ["@change=\"${1:foo} = $event\""], + "description": "Vue Emit to Parent Component" } } diff --git a/snippets/vue-script-router.json b/snippets/vue-script-router.json index f26cb19..9f584df 100644 --- a/snippets/vue-script-router.json +++ b/snippets/vue-script-router.json @@ -12,7 +12,7 @@ "\tmode: 'history',", "\troutes: [", "\t\t{ path: '/path', component: component }", - "\t}", + "\t]", "});" ], "description": "Base for Vue Router" @@ -35,7 +35,7 @@ "body": [ "router.beforeEach((to, from, next) => {", "\t${1:next();}", - "};" + "});" ], "description": "Vue Router global guards beforeEach" }, @@ -44,26 +44,18 @@ "body": [ "router.beforeResolve((to, from, next) => {", "\t${1:next();}", - "};" + "});" ], "description": "Vue Router global guards beforeResolve" }, "Vue Router afterEach": { "prefix": "vaftereach", - "body": [ - "router.afterEach((to, from) => {", - "\t", - "};" - ], + "body": ["router.afterEach((to, from) => {", "\t", "});"], "description": "Vue Router global guards afterEach" }, "Vue Router beforeEnter": { "prefix": "vbeforeenter", - "body": [ - "beforeEnter(to, from, next) {", - "\t${1:next();}", - "}," - ], + "body": ["beforeEnter(to, from, next) {", "\t${1:next();}", "},"], "description": "Vue Router per-route guard beforeEnter" }, "Vue Router beforeRouteEnter": { @@ -77,20 +69,12 @@ }, "Vue Router beforeRouteUpdate": { "prefix": "vbeforerouteupdate", - "body": [ - "beforeRouteUpdate(to, from, next) {", - "\t${1:next();}", - "}," - ], + "body": ["beforeRouteUpdate(to, from, next) {", "\t${1:next();}", "},"], "description": "Vue Router component guards beforeRouteUpdate" }, "Vue Router beforeRouteLeave": { "prefix": "vbeforerouteleave", - "body": [ - "beforeRouteLeave(to, from, next) {", - "\t${1:next();}", - "}," - ], + "body": ["beforeRouteLeave(to, from, next) {", "\t${1:next();}", "},"], "description": "Vue Router component guards beforeRouteLeave" }, "Vue Router Route": { diff --git a/snippets/vue-script-setup.json b/snippets/vue-script-setup.json new file mode 100644 index 0000000..c0de1d2 --- /dev/null +++ b/snippets/vue-script-setup.json @@ -0,0 +1,40 @@ +{ + "Vue SFC Script Setup (Composition API)": { + "prefix": ["vbase-3-script-setup", "vbase-3-ss"], + "body": [ + "", + "", + "", + "", + "" + ], + "description": "Base for Vue Single File Component Script Setup (Composition API)" + }, + "Vue SFC Script Setup with TypeScript (Composition API)": { + "prefix": ["vbase-3-script-setup-ts", "vbase-3-ss-ts"], + "body": [ + "", + "", + "", + "", + "" + ], + "description": "Base for Vue Single File Component Script Setup with TypeScript (Composition API)" + } +} diff --git a/snippets/vue-script.json b/snippets/vue-script.json index ba5e344..2abfffe 100644 --- a/snippets/vue-script.json +++ b/snippets/vue-script.json @@ -111,20 +111,25 @@ "Vue Import Export": { "prefix": "vimport-export", "body": [ - "import ${1:Name} from '@/components/${1:Name}.vue'", + "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 Import Component Dynamically": { + "prefix": "vimport-dynamic", + "body": ["${1:New} = () => import('@/components/${1:New}.vue')"], + "description": "Import component that should be lazy loaded" + }, "Vue MapState": { "prefix": "vmapstate", "body": [ - "import { mapState } from 'vuex'", + "import { mapState } from 'vuex';", "", "export default {", "\tcomputed: {", @@ -132,14 +137,14 @@ "\t\t\t${1:'nameOfState'},", "\t\t])", "\t},", - "}" + "};" ], "description": "map getters inside a vue component" }, "Vue MapGetters": { "prefix": "vmapgetters", "body": [ - "import { mapGetters } from 'vuex'", + "import { mapGetters } from 'vuex';", "", "export default {", "\tcomputed: {", @@ -147,14 +152,14 @@ "\t\t\t${1:'nameOfGetter'},", "\t\t])", "\t},", - "}" + "};" ], "description": "mapgetters inside a vue component" }, "Vue MapMutations": { "prefix": "vmapmutations", "body": [ - "import { mapMutations } from 'vuex'", + "import { mapMutations } from 'vuex';", "", "export default {", "\tmethods: {", @@ -162,14 +167,14 @@ "\t\t\t${1:'nameOfMutation'}, //also supports payload `this.nameOfMutation(amount)` ", "\t\t])", "\t},", - "}" + "};" ], "description": "mapmutations inside a vue component" }, "Vue MapActions": { "prefix": "vmapactions", "body": [ - "import { mapActions } from 'vuex'", + "import { mapActions } from 'vuex';", "", "export default {", "\tmethods: {", @@ -177,7 +182,7 @@ "\t\t\t${1:'nameOfAction'}, //also supports payload `this.nameOfAction(amount)` ", "\t\t])", "\t},", - "}" + "};" ], "description": "mapactions inside a vue component" }, @@ -197,9 +202,9 @@ "body": [ "const ${1:mixinName} = {", "\tmounted() {", - "\t\tconsole.log('hello from mixin!')", + "\t\tconsole.log('hello from mixin!');", "\t},", - "}" + "};" ], "description": "vue mixin" }, @@ -221,14 +226,13 @@ }, "Vue Import Library": { "prefix": "vimport-lib", - "body": ["import { ${1:libName} } from '${1:libName}'"], + "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." + "body": ["import gsap from 'gsap';"], + "description": "import gsap library" }, "Vue Transition Methods with JavaScript Hooks": { "prefix": "vanimhook-js", @@ -254,7 +258,7 @@ "prefix": "vcommit", "body": [ "${1:mutationName}() {", - "\tthis.\\$store.commit('${1:mutationName}', ${2:payload})", + "\tthis.\\$store.commit('${1:mutationName}', ${2:payload});", "}" ], "description": "commit to vuex store in methods for mutation" @@ -263,35 +267,25 @@ "prefix": "vdispatch", "body": [ "${1:actionName}() {", - "\tthis.\\$store.dispatch('${1:actionName}', ${2:payload})", + "\tthis.\\$store.dispatch('${1:actionName}', ${2:payload});", "}" ], "description": "dispatch to vuex store in methods for action" }, - "Incrementer": { - "prefix": "vinc", - "body": ["return ${1:this.num} += ${2:1}"], - "description": "increment" - }, - "Decrementer": { - "prefix": "vdec", - "body": ["return ${1:this.num} -= ${2:1}"], - "description": "decrement" - }, "Unit Test": { "prefix": "vtest", "body": [ - "import Vue from 'vue'", - "import ${1:HelloWorld} from './components/${1:HelloWorld}'", + "import Vue from 'vue';", + "import ${1:HelloWorld} from './components/${1:HelloWorld}';", "", "describe('${1:HelloWorld}.vue', () => {", "\tit('${2:should render correct contents}', () => {", - "\t\tconst Constructor = Vue.extend(${1:HelloWorld})", - "\t\tconst vm = new Constructor().$mount()", + "\t\tconst Constructor = Vue.extend(${1:HelloWorld});", + "\t\tconst vm = new Constructor().$mount();", "\t\texpect(vm.$el.querySelector('.hello h1').textContent)", - "\t\t\t.to.equal(${3:'Welcome to Your Vue.js App'})", - "\t})", - "})" + "\t\t\t.to.equal(${3:'Welcome to Your Vue.js App'});", + "\t});", + "});" ], "description": "unit test component" }, @@ -309,5 +303,120 @@ "}" ], "description": "vue.config.js" + }, + "Vue Composition API - Reactive": { + "prefix": "v3reactive", + "body": ["const ${1:name} = reactive({", "\t${2:count}: ${3:0}", "})"], + "description": "Vue Composition api - reactive" + }, + "Vue Composition API - Computed": { + "prefix": "v3computed", + "body": ["const ${1:name} = computed(() => {", "\treturn ${2}", "})"], + "description": "Vue Composition api - computed" + }, + "Vue Composition API - watch - single source": { + "prefix": "v3watch", + "body": ["watch(() => ${1:foo}, (newValue, oldValue) => {", "\t${2}", "})"], + "description": "Vue Composition api - watcher single source" + }, + "Vue Composition API - watch - array": { + "prefix": "v3watch-array", + "body": [ + "watch([${1:foo}, ${2:bar}], ([new${1}, new${2}], [prev${1}, prev${2}]) => {", + "\t${3}", + "})" + ], + "description": "Vue Composition api - watch as array" + }, + "Vue Composition API - watchEffect": { + "prefix": "v3watcheffect", + "body": ["watchEffect(() => {", "\t${1}", "})"], + "description": "Vue Composition api - watchEffect" + }, + "Vue Composition API - Vue ref": { + "prefix": "v3ref", + "body": ["const ${1:name} = ref(${2:initialValue})"], + "description": "Vue Ref" + }, + "Vue Lifecycle Hooks - onMounted": { + "prefix": "v3onmounted", + "body": ["onMounted(() => {${1}})"], + "description": "Vue Mounted Lifecycle hook" + }, + "Vue Lifecycle Hooks - onBeforeMount": { + "prefix": "v3onbeforemount", + "body": ["onBeforeMount(() => {${1}})"], + "description": "Vue onBeforeMount Lifecycle hook" + }, + "Vue Lifecycle Hooks - onBeforeUpdate": { + "prefix": "v3onbeforeupdate", + "body": ["onBeforeUpdate(() => {${1}})"], + "description": "Vue onBeforeUpdate Lifecycle hook" + }, + "Vue Lifecycle Hooks - onUpdated": { + "prefix": "v3onupdated", + "body": ["onUpdated(() => {${1}})"], + "description": "Vue onUpdated Lifecycle hook" + }, + "Vue Lifecycle Hooks - onErrorCaptured": { + "prefix": "v3onerrorcaptured", + "body": ["onErrorCaptured(() => {${1}})"], + "description": "Vue onErrorCaptured Lifecycle hook" + }, + "Vue Lifecycle Hooks - onUnmounted": { + "prefix": "v3onunmounted", + "body": ["onUnmounted(() => {${1}})"], + "description": "(destroyed) Vue onUnmounted Lifecycle hook" + }, + "Vue Lifecycle Hooks - onBeforeUnmount": { + "prefix": "v3onbeforeunmount", + "body": ["onBeforeUnmount(() => {${1}})"], + "description": "(beforeDestroy) Vue onBeforeUnmount Lifecycle hook" + }, + "Plugin import": { + "prefix": "vplugin", + "body": [ + "import Vue from 'vue'", + "import ${1:VueCompositionApi} from '${2:@vue/composition-api}'", + "", + "Vue.use(${1:VueCompositionApi})" + ], + "description": "Import a plugin to main.js or plugins file" + }, + "Vue Composition API Reactive Script": { + "prefix": "v3reactive-setup", + "body": [ + "import { reactive, toRefs } from 'vue'", + "", + "export default {", + "\tsetup () {", + "\t\tconst state = reactive({", + "\t\t\t${0:count}: ${1:0},", + "\t\t})", + "\t", + "\t\treturn {", + "\t\t\t...toRefs(state),", + "\t\t}", + "\t}", + "}" + ], + "description": "Vue Composition API Script with Reactive" + }, + "Use Composition API within Options API": { + "prefix": "v3useinoptions", + "body": [ + "import { ${0:component} } from '@/composables/${0:component}.js'", + "", + "export default {", + "\tsetup () {", + "\t\tconst { ${1:name} } = ${0:component}()", + "\t", + "\t\treturn {", + "\t\t\t${1:name}", + "\t\t}", + "\t}", + "}" + ], + "description": "Use Composition API within Options API" } } diff --git a/snippets/vue-template.json b/snippets/vue-template.json index 036bae9..4635855 100644 --- a/snippets/vue-template.json +++ b/snippets/vue-template.json @@ -30,6 +30,11 @@ "body": ["<${1:component} :${1:propName}=\"${0}\">"], "description": "component element with props" }, + "Vue Named Slot": { + "prefix": "vslot-named", + "body": [""], + "description": "named slot" + }, "Vue Image Source Binding": { "prefix": "vsrc", "body": [ @@ -68,6 +73,16 @@ ], "description": "vue multiple conditional class bindings" }, + "Vue Emit from Child": { + "prefix": "vemit-child", + "body": ["@change=\"$$emit('change', $$event.target.value)\""], + "description": "Vue Emit from Child Component" + }, + "Vue Emit to Parent": { + "prefix": "vemit-parent", + "body": ["@change=\"${1:foo} = $$event\""], + "description": "Vue Emit to Parent Component" + }, "Vue Transition Component with JavaScript Hooks": { "prefix": "vanim", "body": [ @@ -91,17 +106,31 @@ }, "Vue Named Routing Link": { "prefix": "vroutename", - "body": ["${2:LinkTitle}"], + "body": [ + "${2:LinkTitle}" + ], "description": "Named routing link" - }, + }, "Vue Named Routing Link with Params": { "prefix": "vroutenameparam", - "body": ["${4:LinkTitle}"], + "body": [ + "${4:LinkTitle}" + ], "description": "Named routing link w/ params" }, "Vue Path Routing Link": { "prefix": "vroutepath", "body": ["${2:LinkTitle}"], "description": "Path routing link" + }, + "Vue Emit from Child": { + "prefix": "vemit-child", + "body": ["@change=\"$emit('change', $event.target.value)\""], + "description": "Vue Emit from Child Component" + }, + "Vue Emit to Parent": { + "prefix": "vemit-parent", + "body": ["@change=\"${1:foo} = $event\""], + "description": "Vue Emit to Parent Component" } -} +} \ No newline at end of file diff --git a/snippets/vue.json b/snippets/vue.json index 4e6f27c..578866c 100644 --- a/snippets/vue.json +++ b/snippets/vue.json @@ -1,91 +1,154 @@ { - "Vue Single File Component": { - "prefix": "vbase", - "body": [ - "", - "", - "", - "", - "" - ], - "description": "Base for Vue File with SCSS" - }, - "Vue Single File Component with postcss": { - "prefix": "vbase-pcss", - "body": [ - "", - "", - "", - "", - "" - ], - "description": "Base for Vue File with PostCSS" - }, - "Vue Single File Component with Css": { - "prefix": "vbase-css", - "body": [ - "", - "", - "", - "", - "" - ], - "description": "Base for Vue File with CSS" - }, - "Vue Single File Component with Typescript": { - "prefix": "vbase-ts", - "body": [ - "", - "", - "", - "", - "" - ], - "description": "Base for Vue File with Typescript" - }, - "Vue Single File Component with No Style": { + "Vue Single File Component": { + "prefix": "vbase", + "body": [ + "", + "", + "", + "", + "" + ], + "description": "Base for Vue File with SCSS" + }, + "Vue Single File Component with SASS": { + "prefix": "vbase-sass", + "body": [ + "", + "", + "", + "", + "" + ], + "description": "Base for Vue File with PostCSS" + }, + "Vue Single File Component with LESS": { + "prefix": "vbase-less", + "body": [ + "", + "", + "", + "", + "" + ], + "description": "Base for Vue File with PostCSS" + }, + "Vue Single File Component with postcss": { + "prefix": "vbase-pcss", + "body": [ + "", + "", + "", + "", + "" + ], + "description": "Base for Vue File with PostCSS" + }, + "Vue Single File Component with Css": { + "prefix": "vbase-css", + "body": [ + "", + "", + "", + "", + "" + ], + "description": "Base for Vue File with CSS" + }, + "Vue Single File Component with Stylus": { + "prefix": "vbase-styl", + "body": [ + "", + "", + "", + "", + "" + ], + "description": "Base for Vue File with Stylus" + }, + "Vue Single File Component with Typescript": { + "prefix": "vbase-ts", + "body": [ + "", + "", + "", + "", + "" + ], + "description": "Base for Vue File with Typescript" + }, + "Vue Single File Component with No Style": { "prefix": "vbase-ns", "body": [ "