├── .github └── FUNDING.yml ├── .gitignore ├── .vscode └── launch.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── extension.js ├── images ├── SnippetDemo.gif ├── vue-logo.png └── vue-snippet-hero.gif ├── package.json ├── snippets ├── ignore.json ├── nuxt-config.json ├── nuxt-script.json ├── vue-pug.json ├── vue-script-router.json ├── vue-script-setup.json ├── vue-script-vuex.json ├── vue-script.json ├── vue-template.json └── vue.json └── yarn.lock /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [sdras] 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### OSX ### 2 | *.DS_Store 3 | .AppleDouble 4 | .LSOverride 5 | 6 | # Icon must end with two 7 | Icon 8 | # Thumbnails 9 | ._* 10 | # Files that might appear in the root of a volume 11 | .DocumentRevisions-V100 12 | .fseventsd 13 | .Spotlight-V100 14 | .TemporaryItems 15 | .Trashes 16 | .VolumeIcon.icns 17 | .com.apple.timemachine.donotpresent 18 | # Directories potentially created on remote AFP share 19 | .AppleDB 20 | .AppleDesktop 21 | Network Trash Folder 22 | Temporary Items 23 | .apdisk 24 | 25 | ### Node ### 26 | # Logs 27 | logs 28 | *.log 29 | npm-debug.log* 30 | 31 | # Runtime data 32 | pids 33 | *.pid 34 | *.seed 35 | *.pid.lock 36 | 37 | # Directory for instrumented libs generated by jscoverage/JSCover 38 | lib-cov 39 | 40 | # Coverage directory used by tools like istanbul 41 | coverage 42 | 43 | # nyc test coverage 44 | .nyc_output 45 | 46 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 47 | .grunt 48 | 49 | # node-waf configuration 50 | .lock-wscript 51 | 52 | # Compiled binary addons (http://nodejs.org/api/addons.html) 53 | build/Release 54 | 55 | # Dependency directories 56 | node_modules 57 | jspm_packages 58 | 59 | # Optional npm cache directory 60 | .npm 61 | 62 | # Optional eslint cache 63 | .eslintcache 64 | 65 | # Optional REPL history 66 | .node_repl_history 67 | 68 | # Output of 'npm pack' 69 | *.tgz 70 | 71 | # Yarn Integrity file 72 | .yarn-integrity 73 | 74 | # VS Code 75 | vsc-extension-quickstart.md 76 | *.vsix 77 | .vscode 78 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | { 3 | "version": "0.1.0", 4 | "configurations": [ 5 | { 6 | "name": "Launch Extension", 7 | "type": "extensionHost", 8 | "request": "launch", 9 | "runtimeExecutable": "${execPath}", 10 | "args": ["--extensionDevelopmentPath=${workspaceRoot}" ] 11 | } 12 | ] 13 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to the "vue-vscode-snippets" extension will be documented in this file. 4 | 5 | ## 3.2.0 6 | 7 | - Add base script setup blocks for Vue 3 8 | - Update README with new snippets 9 | 10 | ## 3.1.1 11 | 12 | - Update README 13 | 14 | ## 3.1.0 15 | 16 | - Remove any extension dependencies 17 | 18 | ## 3.0.0 19 | 20 | - Vetur -> Volar, extension dependencies 21 | 22 | ## 2.2.1 23 | 24 | - remove name of package for composition api now that we're at vue 3 25 | 26 | ## 2.2.0 27 | 28 | - Add in Nuxt axios module 29 | - Fix bug in emit- wrong snippet area 30 | - Update TS reference 31 | - Fix typo in README 32 | 33 | ## 2.1.5 34 | 35 | - Fix bug: fix dollar signs in emit 36 | 37 | ## 2.1.4 38 | 39 | - Fix bug: put emit into template instead of script 40 | 41 | ## 2.1.3 42 | 43 | - Add in boilerplate to use Composition API inside Options API 44 | 45 | ## 2.1.2 46 | 47 | - Add in Vue 3 Composition API with Reactive boilerplate script 48 | 49 | ## 2.1.1 50 | 51 | - Update readme to reflect Vue 3 support 52 | 53 | ## 2.1.0 54 | 55 | - Further Vue 3 Composition API support 56 | - Adds in Emit 57 | - Adds in named slot 58 | - Better TypeScript support 59 | - Removes increment/decrement 60 | - Updates gsap 61 | 62 | ## 2.0.0 63 | 64 | - Vue 3 Composition API support 65 | 66 | ## 1.9.0 67 | 68 | - New vbase support: LESS, SASS, Stylus, no CSS 69 | - Fix pug support 70 | - Fix brackets on vue router 71 | - New snippets: Nuxt page snippets 72 | 73 | ## 1.8.0 74 | 75 | - New snippet: Vue router 76 | - New snippet: vbase without scss 77 | 78 | ## 1.7.1 79 | 80 | - Make simpler action 81 | 82 | ## 1.7.0 83 | 84 | - Add in vue-router snippets 85 | - Add trailing comma on vmixin 86 | - Add in updated way to write Vuex store 87 | 88 | ## 1.6.0 89 | 90 | - Fix bug in `vcomputed` 91 | - Fix bug in vbase that was defaulting to ts 92 | 93 | ## 1.5.0 94 | 95 | - Support for mapState, mapGetters, mapMutations, mapActions 96 | - Support for vue.config.js 97 | 98 | ## 1.4.0 99 | 100 | - Lifecycle methods 101 | - Vuex scaffold 102 | - TypeScript 103 | 104 | ## 1.3.0 105 | 106 | - Add nuxt and dist to .gitignore 107 | - Add in testing snippet 108 | - Make component imports consistent 109 | 110 | ## 1.0.0 111 | 112 | - Initial release 113 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Sarah Drasner 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue VSCode Snippets 2 | 3 | ![vue-snippet-hero](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/vue-snippet-hero.gif) 4 | 5 | ## Description 6 | 7 | These snippets were built to supercharge a workflow in the most seamless manner possible. 8 | 9 | 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. 10 | 11 | _Versions Supported: Vue 2 and Vue 3_ 12 | 13 | ![SnippetDemo](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/SnippetDemo.gif) 14 | 15 | ## Installation 16 | 17 | _Either_ 18 | 19 | - click the extensions button (lowest square icon in the editor), and type in Vue VSCode Snippets, select the one by sdras 20 | 21 | _or_ 22 | 23 | - go here [vscode Extensions Marketplace](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets) 24 | 25 | ```javascript 26 | ext install Vue VSCode Snippets 27 | ``` 28 | 29 | You can enable tab completion (recommended) by opening `Code > Preferences > Settings` (on a Mac) and applying `"editor.tabCompletion": "onlySnippets"` to your personal settings 30 | 31 | ## Snippets 32 | 33 | ### Vue 34 | 35 | These snippets are meant to provide a base scaffold for your single file components (SFC). 36 | 37 | | Snippet | Purpose | 38 | | ------------------ | ------------------------------------------ | 39 | | `vbase-3-ss` | SFC base with script setup | 40 | | `vbase-3-ss-ts` | SFC base with script setup and TypeScript | 41 | | `vbase` | SFC base with SCSS | 42 | | `vbase-3` | SFC Composition API with SCSS | 43 | | `vbase-3-setup` | SFC setup Composition API with SCSS | 44 | | `vbase-3-setup` | SFC setup Composition API with SCSS | 45 | | `vbase-3-reactive` | SFC Composition API with Reactive and SCSS | 46 | | `vbase-css` | SFC base with CSS | 47 | | `vbase-pcss` | SFC base with PostCSS | 48 | | `vbase-styl` | SFC base with Stylus | 49 | | `vbase-ts` | SFC base with Typescript | 50 | | `vbase-ts-class` | SFC base with Typescript Class Format | 51 | | `vbase-3-ts` | SFC Composition API with Typescript | 52 | | `vbase-3-ts-setup` | SFC setup Composition API with Typescript | 53 | | `vbase-ns` | SFC with no styles | 54 | | `vbase-sass` | SFC base with SASS | 55 | | `vbase-less` | SFC base with LESS | 56 | 57 | ### Template 58 | 59 | | Snippet | Purpose | 60 | | ----------------- | ----------------------------------- | 61 | | `vfor` | v-for directive | 62 | | `vmodel` | Semantic v-model directive | 63 | | `vmodel-num` | Semantic v-model number directive | 64 | | `von` | v-on click handler with arguments | 65 | | `vslot-named` | Named slot | 66 | | `vel-props` | Component element with props | 67 | | `vsrc` | Image src binding | 68 | | `vstyle` | Inline style binding | 69 | | `vstyle-obj` | Inline style binding with objects | 70 | | `vclass` | Class binding | 71 | | `vclass-obj` | Class binding with objects | 72 | | `vclass-obj-mult` | Multiple conditional class bindings | 73 | | `vanim` | Transition component with JS hooks | 74 | | `vnuxtl` | Nuxt Routing Link | 75 | | `vroutename` | router-link Named Routing | 76 | | `vroutenameparam` | router-link Named with Parameters | 77 | | `vroutepath` | router-link Path Routing Link | 78 | | `vemit-child` | Emit event from child component | 79 | | `vemit-parent` | Emit event to parent component | 80 | 81 | ### Script 82 | 83 | | Snippet | Purpose | 84 | | ----------------- | ------------------------------------------------------------------------ | 85 | | `vdata` | Component data as a function | 86 | | `vmethod` | Vue method | 87 | | `vcomputed` | Vue computed property | 88 | | `vwatcher` | Vue watcher with new and old value args | 89 | | `vbeforecreate` | beforeCreate lifecycle method | 90 | | `vcreated` | created lifecycle method | 91 | | `vbeforemount` | beforeMount lifecycle method | 92 | | `vmounted` | vmounted lifecycle method | 93 | | `vbeforeupdate` | beforeUpdate lifecycle method | 94 | | `vupdated` | updated lifecycle method | 95 | | `vbeforedestroy` | beforeDestroy lifecycle method | 96 | | `vdestroyed` | destroyed lifecycle method | 97 | | `vprops` | Props with type and default | 98 | | `vimport` | Import one component into another | 99 | | `vimport-dynamic` | Import one component that should be lazy loaded by webpack | 100 | | `vcomponents` | Import one component into another within the export statement | 101 | | `vimport-export` | Import one component into another and use it within the export statement | 102 | | `vmapstate` | import mapState from Vuex into vue component component | 103 | | `vmapgetters` | import mapGetters from Vuex into vue component component | 104 | | `vmapmutations` | import mapMutations from Vuex into vue component component | 105 | | `vmapactions` | import mapActions from Vuex into vue component component | 106 | | `vfilter` | Vue filter | 107 | | `vmixin` | Create a Vue Mixin | 108 | | `vmixin-use` | Bring a mixin into a component to use | 109 | | `vc-direct` | Vue create a custom directive | 110 | | `vimport-lib` | Import a library | 111 | | `vimport-gsap` | Import GreenSock | 112 | | `vanimhook-js` | Using the Transition component JS hooks in methods | 113 | | `vcommit` | Commit to Vuex store in methods for mutation | 114 | | `vdispatch` | Dispatch to Vuex store in methods for action | 115 | | `vtest` | A simple unit testing component | 116 | 117 | ### Vue Composition API 118 | 119 | | Snippet | Purpose | 120 | | ------------------- | ----------------------------------------------------- | 121 | | `v3reactive` | Vue Composition API - reactive | 122 | | `v3reactive-setup` | Vue Composition API - reactive with setup boilerplate | 123 | | `v3computed` | Vue Composition API - computed | 124 | | `v3watch` | Vue Composition API - watcher single source | 125 | | `v3watch-array` | Vue Composition API - watch as array | 126 | | `v3watcheffect` | Vue Composition API - watchEffect | 127 | | `v3ref` | Vue Ref | 128 | | `v3onmounted` | Lifecycle hook - onMounted | 129 | | `v3onbeforemount` | Lifecycle hook - onBeforeMount | 130 | | `v3onbeforeupdate` | Lifecycle hook - onBeforeUpdate | 131 | | `v3onupdated` | Lifecycle hook - onUpdated | 132 | | `v3onerrorcaptured` | Lifecycle hook - onErrorCaptured | 133 | | `v3onunmounted` | Lifecycle hook - (destroyed) onUnmounted | 134 | | `v3onbeforeunmount` | Lifecycle hook - (beforeDestroy) onBeforeUnmount | 135 | | `v3useinoptions` | Use Composition API in Options API | 136 | 137 | ### Vuex 138 | 139 | | Snippet | Purpose | 140 | | --------------- | ------------------------------ | 141 | | `vstore` | Base for Vuex store.js | 142 | | `vgetter` | Vuex Getter | 143 | | `vmutation` | Vuex Mutation | 144 | | `vaction` | Vuex Action | 145 | | `vmodule` | Vuex Module | 146 | | `vstore-import` | Import vuex store into main.js | 147 | | `vstore2` | Updated Base for Vuex store | 148 | 149 | ### Vue Router 150 | 151 | | Snippet | Purpose | 152 | | -------------------- | --------------------------------------------- | 153 | | `vrouter` | Vue Router base | 154 | | `vscrollbehavior` | Vue Router scrollBehavior | 155 | | `vbeforeeach` | Vue Router global guards beforeEach | 156 | | `vbeforeresolve` | Vue Router global guards beforeResolve | 157 | | `vaftereach` | Vue Router global guards afterEach | 158 | | `vbeforeenter` | Vue Router per-route guard beforeEnter | 159 | | `vbeforerouteenter` | Vue Router component guards beforeRouteEnter | 160 | | `vbeforerouteupdate` | Vue Router component guards beforeRouteUpdate | 161 | | `vbeforerouteleave` | Vue Router component guards beforeRouteLeave | 162 | 163 | ### Vue Config 164 | 165 | | Snippet | Purpose | 166 | | --------- | -------------------------------------------------------------------- | 167 | | `vplugin` | Import a plugin to main.js or plugins file | 168 | | `vconfig` | vue.config.js file, example imports a sass file into every component | 169 | 170 | ### Nuxt Config 171 | 172 | | Snippet | Purpose | 173 | | ------- | ------------------------------------------------------- | 174 | | `nfont` | link to include fonts in a nuxt project, in nuxt-config | 175 | | `ncss` | link to css assets such as normalize | 176 | 177 | ### Nuxt Page 178 | 179 | | Snippet | Purpose | 180 | | ----------------- | -------------------------------- | 181 | | `nasyncdata` | Nuxt asyncData | 182 | | `nasyncdataaxios` | Nuxt asyncData with Axios module | 183 | | `nfetch` | Nuxt Fetch | 184 | | `nfetchaxios` | Nuxt Fetch with Axios module | 185 | | `nhead` | Nuxt Head | 186 | | `nparam` | Nuxt Route Params | 187 | 188 | ### Extra (plaintext) 189 | 190 | | Snippet | Purpose | 191 | | ----------- | ----------------------- | 192 | | `gitignore` | .gitignore file presets | 193 | 194 | ## Contributing 195 | 196 | This is an open source project open to anyone. Contributions are welcome [github](https://github.com/sdras/vue-vscode-snippets) 197 | 198 | 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! 199 | -------------------------------------------------------------------------------- /extension.js: -------------------------------------------------------------------------------- 1 | // The module 'vscode' contains the VS Code extensibility API 2 | // Import the module and reference it with the alias vscode in your code below 3 | let vscode = require('vscode'); 4 | 5 | // this method is called when your extension is activated 6 | // your extension is activated the very first time the command is executed 7 | function activate(context) { 8 | 9 | // Use the console to output diagnostic information (console.log) and errors (console.error) 10 | // This line of code will only be executed once when your extension is activated 11 | console.log('Congratulations, your extension "vue-vscode-snippets" is now active!'); 12 | 13 | // The command has been defined in the package.json file 14 | // Now provide the implementation of the command with registerCommand 15 | // The commandId parameter must match the command field in package.json 16 | let disposable = vscode.commands.registerCommand('extension.sayHello', function () { 17 | // The code you place here will be executed every time your command is executed 18 | 19 | // Display a message box to the user 20 | vscode.window.showInformationMessage('Hello World!'); 21 | }); 22 | 23 | context.subscriptions.push(disposable); 24 | } 25 | exports.activate = activate; 26 | 27 | // this method is called when your extension is deactivated 28 | function deactivate() { 29 | } 30 | exports.deactivate = deactivate; -------------------------------------------------------------------------------- /images/SnippetDemo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/vue-vscode-snippets/ef6181aabe4d54fe024202a6dd8c80c79fe55e5b/images/SnippetDemo.gif -------------------------------------------------------------------------------- /images/vue-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/vue-vscode-snippets/ef6181aabe4d54fe024202a6dd8c80c79fe55e5b/images/vue-logo.png -------------------------------------------------------------------------------- /images/vue-snippet-hero.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/vue-vscode-snippets/ef6181aabe4d54fe024202a6dd8c80c79fe55e5b/images/vue-snippet-hero.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-vscode-snippets", 3 | "displayName": "Vue VSCode Snippets", 4 | "description": "Snippets that will supercharge your Vue workflow", 5 | "icon": "images/vue-logo.png", 6 | "version": "3.2.0", 7 | "publisher": "sdras", 8 | "engines": { 9 | "vscode": "^1.14.0" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/sdras/vue-vscode-snippets.git" 14 | }, 15 | "scripts": { 16 | "build": "vsce package -o vue-vscode-snippets-$npm_package_version.vsix", 17 | "install": "yarn build && code --install-extension vue-vscode-snippets-$npm_package_version.vsix" 18 | }, 19 | "keywords": [ 20 | "Vue", 21 | "Vue 3", 22 | "Vue 2", 23 | "Composition API", 24 | "Vue Snippets" 25 | ], 26 | "categories": [ 27 | "Snippets" 28 | ], 29 | "contributes": { 30 | "snippets": [ 31 | { 32 | "language": "vue", 33 | "path": "./snippets/vue.json" 34 | }, 35 | { 36 | "language": "jade", 37 | "path": "./snippets/vue-pug.json" 38 | }, 39 | { 40 | "language": "html", 41 | "path": "./snippets/vue-template.json" 42 | }, 43 | { 44 | "language": "vue-html", 45 | "path": "./snippets/vue-template.json" 46 | }, 47 | { 48 | "language": "javascript", 49 | "path": "./snippets/vue-script.json" 50 | }, 51 | { 52 | "language": "javascript", 53 | "path": "./snippets/vue-script-setup.json" 54 | }, 55 | { 56 | "language": "javascript", 57 | "path": "./snippets/vue-script-vuex.json" 58 | }, 59 | { 60 | "language": "javascript", 61 | "path": "./snippets/vue-script-router.json" 62 | }, 63 | { 64 | "language": "javascript", 65 | "path": "./snippets/nuxt-config.json" 66 | }, 67 | { 68 | "language": "javascript", 69 | "path": "./snippets/nuxt-script.json" 70 | }, 71 | { 72 | "language": "typescript", 73 | "path": "./snippets/vue-script.json" 74 | }, 75 | { 76 | "language": "typescript", 77 | "path": "./snippets/vue-script-vuex.json" 78 | }, 79 | { 80 | "language": "typescript", 81 | "path": "./snippets/vue-script-router.json" 82 | }, 83 | { 84 | "language": "typescript", 85 | "path": "./snippets/nuxt-config.json" 86 | } 87 | ] 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /snippets/ignore.json: -------------------------------------------------------------------------------- 1 | { 2 | "Gitignore": { 3 | "prefix": "gitignore", 4 | "body": [ 5 | "### OSX ###", 6 | "*.DS_Store", 7 | ".AppleDouble", 8 | ".LSOverride", 9 | "", 10 | "# Icon must end with two \r", 11 | "Icon", 12 | "# Thumbnails", 13 | "._*", 14 | "# Files that might appear in the root of a volume", 15 | ".DocumentRevisions-V100", 16 | ".fseventsd", 17 | ".Spotlight-V100", 18 | ".TemporaryItems", 19 | ".Trashes", 20 | ".VolumeIcon.icns", 21 | ".com.apple.timemachine.donotpresent", 22 | "# Directories potentially created on remote AFP share", 23 | ".AppleDB", 24 | ".AppleDesktop", 25 | "Network Trash Folder", 26 | "Temporary Items", 27 | ".apdisk", 28 | "", 29 | "### Node ###", 30 | "# Logs", 31 | "logs", 32 | "*.log", 33 | "npm-debug.log*", 34 | "", 35 | "# Runtime data", 36 | "pids", 37 | "*.pid", 38 | "*.seed", 39 | "*.pid.lock", 40 | "", 41 | "# Directory for instrumented libs generated by jscoverage/JSCover", 42 | "lib-cov", 43 | "", 44 | "# Coverage directory used by tools like istanbul", 45 | "coverage", 46 | "", 47 | "# nyc test coverage", 48 | ".nyc_output", 49 | "", 50 | "# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)", 51 | ".grunt", 52 | "", 53 | "# node-waf configuration", 54 | ".lock-wscript", 55 | "", 56 | "# Compiled binary addons (http://nodejs.org/api/addons.html)", 57 | "build/Release", 58 | "", 59 | "# Dependency directories", 60 | "node_modules", 61 | "jspm_packages", 62 | "", 63 | "# Optional npm cache directory", 64 | ".npm", 65 | "", 66 | "# Optional eslint cache", 67 | ".eslintcache", 68 | "", 69 | "# Optional REPL history", 70 | ".node_repl_history", 71 | "", 72 | "# Output of 'npm pack'", 73 | "*.tgz", 74 | "", 75 | "# Yarn Integrity file", 76 | ".yarn-integrity", 77 | "", 78 | "# Nuxt build", 79 | ".nuxt", 80 | "", 81 | "# Nuxt generate", 82 | "dist" 83 | ], 84 | "description": "gitignore file" 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /snippets/nuxt-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "Nuxt Font": { 3 | "prefix": "nfont", 4 | "body": [ 5 | "{ rel: 'stylesheet', href: '${1:https://fonts.googleapis.com/css?family=Montserrat:600|Rufina:700}' }" 6 | ], 7 | "description": "link to include fonts in a nuxt project, in nuxt-config" 8 | }, 9 | "Nuxt Use CSS File": { 10 | "prefix": "ncss", 11 | "body": ["css: ['assets/${1:normalize.css}'],"], 12 | "description": "link to css assets such as normalize" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /snippets/nuxt-script.json: -------------------------------------------------------------------------------- 1 | { 2 | "Nuxt Async": { 3 | "prefix": "nasyncdata", 4 | "body": [ 5 | "async asyncData ({ ${1:params} }) {", 6 | "\tconst { data } = await fetch(`${2:endpoint}`).then(res => res.json())", 7 | "\treturn { ${3:key}:${4:value} }", 8 | "}," 9 | ], 10 | "description": "Nuxt asyncData" 11 | }, 12 | "Nuxt Async": { 13 | "prefix": "nasyncdataaxios", 14 | "body": [ 15 | "async asyncData ({ ${1:$axios}, { ${2:params} }) {", 16 | "\tconst data = await $axios.$get(`${3:endpoint/${params.slug}}`)", 17 | "\treturn { data }", 18 | "}," 19 | ], 20 | "description": "Nuxt asyncData with Axios module" 21 | }, 22 | "Nuxt Fetch": { 23 | "prefix": "nfetch", 24 | "body": [ 25 | "async fetch ({ store, ${1:params} }) {", 26 | "\tlet { data } = await fetch('${2:endpoint}').then(res => res.json())", 27 | "\tstore.commit('${3:MUTATION_TYPE}', data)", 28 | "}," 29 | ], 30 | "description": "Nuxt Fetch" 31 | }, 32 | "Nuxt Fetch with Axios": { 33 | "prefix": "nfetchaxios", 34 | "body": [ 35 | "async fetch () {", 36 | "\tlet this.data = await this.$axios.$get('${1:endpoint/${this.$route.params.slug}}')", 37 | "}," 38 | ], 39 | "description": "Nuxt Fetch with Axios module" 40 | }, 41 | "Nuxt Route Params": { 42 | "prefix": "nparam", 43 | "body": ["this.$route.params.${1:id}"], 44 | "description": "Nuxt Route Params" 45 | }, 46 | "Nuxt Head": { 47 | "prefix": "nhead", 48 | "body": [ 49 | "head () {", 50 | "\treturn {", 51 | "\t\ttitle: ${1:'Page Title'},", 52 | "\t\tmeta: [", 53 | "\t\t\t// hid is used as unique identifier. Do not use `vmid` for it as it will not work", 54 | "\t\t\t{ hid: 'description', name: 'description', content: ${2:'My custom description'} }", 55 | "\t\t]", 56 | "\t}", 57 | "}," 58 | ], 59 | "description": "Nuxt Head" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /snippets/vue-pug.json: -------------------------------------------------------------------------------- 1 | { 2 | "Vue v-for": { 3 | "prefix": "vfor", 4 | "body": [ 5 | "${1:div}(v-for=\"${2:item} in ${2:item}s\" :key=\"${2:item}.id\")", 6 | "\t| {{ ${2:item} }}" 7 | ], 8 | "description": "vfor statement" 9 | }, 10 | "Vue v-model Directive": { 11 | "prefix": "vmodel", 12 | "body": ["input(v-model=\"${1:data}\" type=\"text\")"], 13 | "description": "v-model directive" 14 | }, 15 | "Vue v-model Number Directive": { 16 | "prefix": "vmodel-num", 17 | "body": [ 18 | "input(v-model.number=\"${1:numData}\" type=\"number\" step=\"1\")" 19 | ], 20 | "description": "v-model directive number input" 21 | }, 22 | "Vue v-on Shortcut Directive": { 23 | "prefix": "von", 24 | "body": ["@click=\"${1:handler}(${2:arg}, $event)\""], 25 | "description": "v-on click handler with arguments" 26 | }, 27 | "Vue Component with Props Binding": { 28 | "prefix": "vel-props", 29 | "body": ["${1:component}(:${1:propName}=\"${0}\")"], 30 | "description": "component element with props" 31 | }, 32 | "Vue Image Source Binding": { 33 | "prefix": "vsrc", 34 | "body": [ 35 | "img(:src=\"'/path/to/images/' + ${1:fileName}\" alt=\"${2:altText}\")" 36 | ], 37 | "description": "image source binding" 38 | }, 39 | "Vue Style Binding": { 40 | "prefix": "vstyle", 41 | "body": ["${1:div}(:style=\"{ fontSize: ${2:data} + 'px' }\")"], 42 | "description": "vue inline style binding" 43 | }, 44 | "Vue Style Binding Object": { 45 | "prefix": "vstyle-obj", 46 | "body": ["${1:div}(:style=\"[${2:styleObjectA}, ${3:styleObjectB]}\")"], 47 | "description": "vue inline style binding, objects" 48 | }, 49 | "Vue Class Binding": { 50 | "prefix": "vclass", 51 | "body": ["${1:div}(:class=\"{ ${2:className}: ${3:data} }\")"], 52 | "description": "vue class binding" 53 | }, 54 | "Vue Class Binding Object": { 55 | "prefix": "vclass-obj", 56 | "body": ["${1:div}(:class=\"[${2:classNameA}, ${3:classNameB}]\")"], 57 | "description": "vue class binding" 58 | }, 59 | "Vue Multiple Conditional Class Bindings": { 60 | "prefix": "vclass-obj-mult", 61 | "body": [ 62 | "${1:div}(:class=\"[${2:classNameA}, {${3:classNameB} : ${4:condition}}]\")" 63 | ], 64 | "description": "vue multiple conditional class bindings" 65 | }, 66 | "Vue Transition Component with JavaScript Hooks": { 67 | "prefix": "vanim", 68 | "body": [ 69 | "transition(", 70 | "\tmode=\"out-in\"", 71 | "\t@before-enter=\"beforeEnter\"", 72 | "\t@enter=\"enter\"", 73 | "", 74 | "\t@before-leave=\"beforeLeave\"", 75 | "\t@leave=\"leave\"", 76 | "\t:css=\"false\"", 77 | ")" 78 | ], 79 | "description": "transition component js hooks" 80 | }, 81 | "Vue Nuxt Routing Link": { 82 | "prefix": "vnuxtl", 83 | "body": ["nuxt-link(to=\"/${1:page}\") ${1:page}"], 84 | "description": "nuxt routing link" 85 | }, 86 | "Vue Emit from Child": { 87 | "prefix": "vemit-child", 88 | "body": ["@change=\"$emit('change', $event.target.value)\""], 89 | "description": "Vue Emit from Child Component" 90 | }, 91 | "Vue Emit to Parent": { 92 | "prefix": "vemit-parent", 93 | "body": ["@change=\"${1:foo} = $event\""], 94 | "description": "Vue Emit to Parent Component" 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /snippets/vue-script-router.json: -------------------------------------------------------------------------------- 1 | { 2 | "Vue Router": { 3 | "prefix": "vrouter", 4 | "body": [ 5 | "import Vue from 'vue';", 6 | "import VueRouter from 'vue-router';", 7 | "", 8 | "Vue.use(VueRouter);", 9 | "", 10 | "export const router = new VueRouter({", 11 | "\tbase: '/',", 12 | "\tmode: 'history',", 13 | "\troutes: [", 14 | "\t\t{ path: '/path', component: component }", 15 | "\t]", 16 | "});" 17 | ], 18 | "description": "Base for Vue Router" 19 | }, 20 | "Vue Router scrollBehavior": { 21 | "prefix": "vscrollbehavior", 22 | "body": [ 23 | "scrollBehavior(to, from, savedPosition) {", 24 | "\tif(savedPosition) {", 25 | "\t\treturn savedPosition;", 26 | "\t} else {", 27 | "\t\treturn { x: 0, y: 0 };", 28 | "\t}", 29 | "}," 30 | ], 31 | "description": "Vue Router scrollBehavior" 32 | }, 33 | "Vue Router beforeEach": { 34 | "prefix": "vbeforeeach", 35 | "body": [ 36 | "router.beforeEach((to, from, next) => {", 37 | "\t${1:next();}", 38 | "});" 39 | ], 40 | "description": "Vue Router global guards beforeEach" 41 | }, 42 | "Vue Router beforeResolve": { 43 | "prefix": "vbeforeresolve", 44 | "body": [ 45 | "router.beforeResolve((to, from, next) => {", 46 | "\t${1:next();}", 47 | "});" 48 | ], 49 | "description": "Vue Router global guards beforeResolve" 50 | }, 51 | "Vue Router afterEach": { 52 | "prefix": "vaftereach", 53 | "body": ["router.afterEach((to, from) => {", "\t", "});"], 54 | "description": "Vue Router global guards afterEach" 55 | }, 56 | "Vue Router beforeEnter": { 57 | "prefix": "vbeforeenter", 58 | "body": ["beforeEnter(to, from, next) {", "\t${1:next();}", "},"], 59 | "description": "Vue Router per-route guard beforeEnter" 60 | }, 61 | "Vue Router beforeRouteEnter": { 62 | "prefix": "vbeforerouteenter", 63 | "body": [ 64 | "beforeRouteEnter(to, from, next) {", 65 | "\tnext(vm => {${1:}});", 66 | "}," 67 | ], 68 | "description": "Vue Router component guards beforeRouteEnter" 69 | }, 70 | "Vue Router beforeRouteUpdate": { 71 | "prefix": "vbeforerouteupdate", 72 | "body": ["beforeRouteUpdate(to, from, next) {", "\t${1:next();}", "},"], 73 | "description": "Vue Router component guards beforeRouteUpdate" 74 | }, 75 | "Vue Router beforeRouteLeave": { 76 | "prefix": "vbeforerouteleave", 77 | "body": ["beforeRouteLeave(to, from, next) {", "\t${1:next();}", "},"], 78 | "description": "Vue Router component guards beforeRouteLeave" 79 | }, 80 | "Vue Router Route": { 81 | "prefix": "vroute-named", 82 | "body": [ 83 | "{", 84 | "\tpath: '${1:pathName}',", 85 | "\tname: '${2:routeName}',", 86 | "\tcomponent: () => import('./${3:pathToComponent}'),", 87 | "}," 88 | ], 89 | "description": "Vue Router route with per route code-splitting" 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /snippets/vue-script-setup.json: -------------------------------------------------------------------------------- 1 | { 2 | "Vue SFC Script Setup (Composition API)": { 3 | "prefix": ["vbase-3-script-setup", "vbase-3-ss"], 4 | "body": [ 5 | "", 8 | "", 9 | "", 14 | "", 15 | "" 18 | ], 19 | "description": "Base for Vue Single File Component Script Setup (Composition API)" 20 | }, 21 | "Vue SFC Script Setup with TypeScript (Composition API)": { 22 | "prefix": ["vbase-3-script-setup-ts", "vbase-3-ss-ts"], 23 | "body": [ 24 | "", 27 | "", 28 | "", 33 | "", 34 | "" 37 | ], 38 | "description": "Base for Vue Single File Component Script Setup with TypeScript (Composition API)" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /snippets/vue-script-vuex.json: -------------------------------------------------------------------------------- 1 | { 2 | "Vuex Store": { 3 | "prefix": "vstore", 4 | "body": [ 5 | "import Vue from 'vue';", 6 | "import Vuex from 'vuex';", 7 | "", 8 | "Vue.use(Vuex);", 9 | "", 10 | "export const store = new Vuex.Store({", 11 | "\tstate: {", 12 | "\t\t${1:key}: ${2:value}", 13 | "\t}", 14 | "});" 15 | ], 16 | "description": "Base for Vuex store" 17 | }, 18 | "Vuex Getters": { 19 | "prefix": "vgetter", 20 | "body": [ 21 | "getters: {", 22 | "\t${1:value}: state => {", 23 | "\t\treturn state.${1:value};", 24 | "\t}", 25 | "}" 26 | ], 27 | "description": "vuex getter" 28 | }, 29 | "Vuex Mutation": { 30 | "prefix": "vmutation", 31 | "body": [ 32 | "mutations: {", 33 | "\t${1:updateValue}(state, ${3:payload}) {", 34 | "\t\tstate.${2:value} = ${3:payload};", 35 | "\t}", 36 | "}" 37 | ], 38 | "description": "vuex mutation" 39 | }, 40 | "Vuex Action": { 41 | "prefix": "vaction", 42 | "body": [ 43 | "actions: {", 44 | "\t${1:updateValue}({commit}, ${2:payload}) {", 45 | "\t\tcommit('${1:updateValue}', ${2:payload});", 46 | "\t}", 47 | "}" 48 | ], 49 | "description": "vuex action" 50 | }, 51 | "Vue Import Vuex Store": { 52 | "prefix": "vstore-import", 53 | "body": ["import { store } from './store/index';"], 54 | "description": "import vuex store into main.js" 55 | }, 56 | "Vuex Module": { 57 | "prefix": "vmodule", 58 | "body": [ 59 | "export default {", 60 | "\tstate: {", 61 | "\t\tvalue: 'my value'", 62 | "\t},", 63 | "\tgetters: {", 64 | "\t\tvalue: state => {", 65 | "\t\t\treturn state.value;", 66 | "\t\t}", 67 | "\t},", 68 | "\tmutations: {", 69 | "\t\tupdateValue(state, payload) {", 70 | "\t\t\tstate.value = payload;", 71 | "\t\t}", 72 | "\t},", 73 | "\tactions: {", 74 | "\t\tupdateValue({commit}, payload) {", 75 | "\t\t\tcommit('updateValue', payload);", 76 | "\t\t}", 77 | "\t}", 78 | "};" 79 | ], 80 | "description": "vuex module" 81 | }, 82 | "Vuex Store 2": { 83 | "prefix": "vstore2", 84 | "body": [ 85 | "export const state = () => ({", 86 | "\tvalue: 'myvalue'", 87 | "})", 88 | "", 89 | "export const getters = {", 90 | "\tgetterValue: state => {", 91 | "\t\treturn state.value", 92 | "\t}", 93 | "}", 94 | "", 95 | "export const mutations = {", 96 | "\tupdateValue: (state, payload) => {", 97 | "\t\tstate.value = payload", 98 | "\t}", 99 | "}", 100 | "", 101 | "export const actions = {", 102 | "\tupdateActionValue({ commit }) {", 103 | "\t\tcommit('updateValue', payload)", 104 | "\t}", 105 | "}" 106 | ], 107 | "description": "vuex store 2" 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /snippets/vue-script.json: -------------------------------------------------------------------------------- 1 | { 2 | "Vue Data": { 3 | "prefix": "vdata", 4 | "body": ["data() {", "\treturn {", "\t\t${1:key}: ${2:value}", "\t}", "},"], 5 | "description": "Vue Component Data" 6 | }, 7 | "Vue Methods": { 8 | "prefix": "vmethod", 9 | "body": ["methods: {", "\t${1:name}() {", "\t\t${0}", "\t}", "},"], 10 | "description": "vue method" 11 | }, 12 | "Vue Computed": { 13 | "prefix": "vcomputed", 14 | "body": [ 15 | "computed: {", 16 | "\t${1:name}() {", 17 | "\t\treturn this.${2:data} ${0}", 18 | "\t}", 19 | "}," 20 | ], 21 | "description": "computed value" 22 | }, 23 | "Vue Lifecycle beforeCreate": { 24 | "prefix": "vbeforecreate", 25 | "body": ["beforeCreate () {", "\t${0};", "},"], 26 | "description": "beforeCreate lifecycle method" 27 | }, 28 | "Vue Lifecycle created": { 29 | "prefix": "vcreated", 30 | "body": ["created () {", "\t${0};", "},"], 31 | "description": "created lifecycle method" 32 | }, 33 | "Vue Lifecycle beforeMount": { 34 | "prefix": "vbeforemount", 35 | "body": ["beforeMount () {", "\t${0};", "},"], 36 | "description": "beforeMount lifecycle method" 37 | }, 38 | "Vue Lifecycle mounted": { 39 | "prefix": "vmounted", 40 | "body": ["mounted () {", "\t${0};", "},"], 41 | "description": "mounted lifecycle method" 42 | }, 43 | "Vue Lifecycle beforeUpdate": { 44 | "prefix": "vbeforeupdate", 45 | "body": ["beforeUpdate () {", "\t${0};", "},"], 46 | "description": "beforeUpdate lifecycle method" 47 | }, 48 | "Vue Lifecycle updated": { 49 | "prefix": "vupdated", 50 | "body": ["updated () {", "\t${0};", "},"], 51 | "description": "updated lifecycle method" 52 | }, 53 | "Vue Lifecycle beforeDestroy": { 54 | "prefix": "vbeforedestroy", 55 | "body": ["beforeDestroy () {", "\t${0};", "},"], 56 | "description": "beforeDestroy lifecycle method" 57 | }, 58 | "Vue Lifecycle destroyed": { 59 | "prefix": "vdestroyed", 60 | "body": ["destroyed () {", "\t${0};", "},"], 61 | "description": "destroyed lifecycle method" 62 | }, 63 | "Vue Watchers": { 64 | "prefix": "vwatcher", 65 | "body": [ 66 | "watch: {", 67 | "\t${1:data}(${2:newValue}, ${3:oldValue}) {", 68 | "\t\t${0}", 69 | "\t}", 70 | "}," 71 | ], 72 | "description": "vue watcher" 73 | }, 74 | "Vue Watchers with Options": { 75 | "prefix": "vwatcher-options", 76 | "body": [ 77 | "watch: {", 78 | "\t${1:data}: {", 79 | "\t\timmediate: ${2:true},", 80 | "\t\tdeep: ${3:true},", 81 | "\t\thandler(${4:newValue}, ${5:oldValue}) {", 82 | "\t\t\t${0}", 83 | "\t\t}", 84 | "\t}", 85 | "}," 86 | ], 87 | "description": "vue watcher with options" 88 | }, 89 | "Vue Props with Default": { 90 | "prefix": "vprops", 91 | "body": [ 92 | "props: {", 93 | "\t${1:propName}: {", 94 | "\t\ttype: ${2:Number},", 95 | "\t\tdefault: ${0}", 96 | "\t},", 97 | "}," 98 | ], 99 | "description": "Vue Props with Default" 100 | }, 101 | "Vue Import File": { 102 | "prefix": "vimport", 103 | "body": ["import ${1:New} from '@/components/${1:New}.vue';"], 104 | "description": "Import one component into another" 105 | }, 106 | "Vue Import into the Component": { 107 | "prefix": "vcomponents", 108 | "body": ["components: {", "\t${1:New},", "},"], 109 | "description": "Import one component into another, within export statement" 110 | }, 111 | "Vue Import Export": { 112 | "prefix": "vimport-export", 113 | "body": [ 114 | "import ${1:Name} from '@/components/${1:Name}.vue';", 115 | "", 116 | "export default {", 117 | "\tcomponents: {", 118 | "\t\t${1:Name}", 119 | "\t},", 120 | "};" 121 | ], 122 | "description": "import a component and include it in export default" 123 | }, 124 | "Vue Import Component Dynamically": { 125 | "prefix": "vimport-dynamic", 126 | "body": ["${1:New} = () => import('@/components/${1:New}.vue')"], 127 | "description": "Import component that should be lazy loaded" 128 | }, 129 | "Vue MapState": { 130 | "prefix": "vmapstate", 131 | "body": [ 132 | "import { mapState } from 'vuex';", 133 | "", 134 | "export default {", 135 | "\tcomputed: {", 136 | "\t\t...mapState([", 137 | "\t\t\t${1:'nameOfState'},", 138 | "\t\t])", 139 | "\t},", 140 | "};" 141 | ], 142 | "description": "map getters inside a vue component" 143 | }, 144 | "Vue MapGetters": { 145 | "prefix": "vmapgetters", 146 | "body": [ 147 | "import { mapGetters } from 'vuex';", 148 | "", 149 | "export default {", 150 | "\tcomputed: {", 151 | "\t\t...mapGetters([", 152 | "\t\t\t${1:'nameOfGetter'},", 153 | "\t\t])", 154 | "\t},", 155 | "};" 156 | ], 157 | "description": "mapgetters inside a vue component" 158 | }, 159 | "Vue MapMutations": { 160 | "prefix": "vmapmutations", 161 | "body": [ 162 | "import { mapMutations } from 'vuex';", 163 | "", 164 | "export default {", 165 | "\tmethods: {", 166 | "\t\t...mapMutations([", 167 | "\t\t\t${1:'nameOfMutation'}, //also supports payload `this.nameOfMutation(amount)` ", 168 | "\t\t])", 169 | "\t},", 170 | "};" 171 | ], 172 | "description": "mapmutations inside a vue component" 173 | }, 174 | "Vue MapActions": { 175 | "prefix": "vmapactions", 176 | "body": [ 177 | "import { mapActions } from 'vuex';", 178 | "", 179 | "export default {", 180 | "\tmethods: {", 181 | "\t\t...mapActions([", 182 | "\t\t\t${1:'nameOfAction'}, //also supports payload `this.nameOfAction(amount)` ", 183 | "\t\t])", 184 | "\t},", 185 | "};" 186 | ], 187 | "description": "mapactions inside a vue component" 188 | }, 189 | "Vue Filter": { 190 | "prefix": "vfilter", 191 | "body": [ 192 | "filters: {", 193 | "\t${1:fnName}: function(${2:value}) {", 194 | "\t\treturn ${2:value}${0};", 195 | "\t}", 196 | "}" 197 | ], 198 | "description": "vue filter" 199 | }, 200 | "Vue Mixin": { 201 | "prefix": "vmixin", 202 | "body": [ 203 | "const ${1:mixinName} = {", 204 | "\tmounted() {", 205 | "\t\tconsole.log('hello from mixin!');", 206 | "\t},", 207 | "};" 208 | ], 209 | "description": "vue mixin" 210 | }, 211 | "Vue Use Mixin": { 212 | "prefix": "vmixin-use", 213 | "body": ["mixins: [${1:mixinName}],"], 214 | "description": "vue use mixin" 215 | }, 216 | "Vue Custom Directive": { 217 | "prefix": "vc-direct", 218 | "body": [ 219 | "Vue.directive('${1:directiveName}', {", 220 | "\tbind(el, binding, vnode) {", 221 | "\t\tel.style.${2:arg} = binding.value.${2:arg};", 222 | "\t}", 223 | "});" 224 | ], 225 | "description": "vue custom directive" 226 | }, 227 | "Vue Import Library": { 228 | "prefix": "vimport-lib", 229 | "body": ["import { ${1:libName} } from '${1:libName}';"], 230 | "description": "import a library" 231 | }, 232 | "Vue Import GSAP": { 233 | "prefix": "vimport-gsap", 234 | "body": ["import gsap from 'gsap';"], 235 | "description": "import gsap library" 236 | }, 237 | "Vue Transition Methods with JavaScript Hooks": { 238 | "prefix": "vanimhook-js", 239 | "body": [ 240 | "beforeEnter(el) {", 241 | "\tconsole.log('beforeEnter');", 242 | "},", 243 | "enter(el, done) {", 244 | "\tconsole.log('enter');", 245 | "\tdone();", 246 | "},", 247 | "beforeLeave(el) {", 248 | "\tconsole.log('beforeLeave');", 249 | "},", 250 | "leave(el, done) {", 251 | "\tconsole.log('leave');", 252 | "\tdone();", 253 | "}," 254 | ], 255 | "description": "transition component js hooks" 256 | }, 257 | "Vue Commit Vuex Store in Methods": { 258 | "prefix": "vcommit", 259 | "body": [ 260 | "${1:mutationName}() {", 261 | "\tthis.\\$store.commit('${1:mutationName}', ${2:payload});", 262 | "}" 263 | ], 264 | "description": "commit to vuex store in methods for mutation" 265 | }, 266 | "Vue Dispatch Vuex Store in Methods": { 267 | "prefix": "vdispatch", 268 | "body": [ 269 | "${1:actionName}() {", 270 | "\tthis.\\$store.dispatch('${1:actionName}', ${2:payload});", 271 | "}" 272 | ], 273 | "description": "dispatch to vuex store in methods for action" 274 | }, 275 | "Unit Test": { 276 | "prefix": "vtest", 277 | "body": [ 278 | "import Vue from 'vue';", 279 | "import ${1:HelloWorld} from './components/${1:HelloWorld}';", 280 | "", 281 | "describe('${1:HelloWorld}.vue', () => {", 282 | "\tit('${2:should render correct contents}', () => {", 283 | "\t\tconst Constructor = Vue.extend(${1:HelloWorld});", 284 | "\t\tconst vm = new Constructor().$mount();", 285 | "\t\texpect(vm.$el.querySelector('.hello h1').textContent)", 286 | "\t\t\t.to.equal(${3:'Welcome to Your Vue.js App'});", 287 | "\t});", 288 | "});" 289 | ], 290 | "description": "unit test component" 291 | }, 292 | "Vue.config.js Import": { 293 | "prefix": "vconfig", 294 | "body": [ 295 | "module.exports = {", 296 | "\tcss: {", 297 | "\t\tloaderOptions: {", 298 | "\t\t\t${1:sass}: {", 299 | "\t\t\t\tdata: `${2:@import '@/styles/_variables.scss';}`", 300 | "\t\t\t}", 301 | "\t\t}", 302 | "\t}", 303 | "}" 304 | ], 305 | "description": "vue.config.js" 306 | }, 307 | "Vue Composition API - Reactive": { 308 | "prefix": "v3reactive", 309 | "body": ["const ${1:name} = reactive({", "\t${2:count}: ${3:0}", "})"], 310 | "description": "Vue Composition api - reactive" 311 | }, 312 | "Vue Composition API - Computed": { 313 | "prefix": "v3computed", 314 | "body": ["const ${1:name} = computed(() => {", "\treturn ${2}", "})"], 315 | "description": "Vue Composition api - computed" 316 | }, 317 | "Vue Composition API - watch - single source": { 318 | "prefix": "v3watch", 319 | "body": ["watch(() => ${1:foo}, (newValue, oldValue) => {", "\t${2}", "})"], 320 | "description": "Vue Composition api - watcher single source" 321 | }, 322 | "Vue Composition API - watch - array": { 323 | "prefix": "v3watch-array", 324 | "body": [ 325 | "watch([${1:foo}, ${2:bar}], ([new${1}, new${2}], [prev${1}, prev${2}]) => {", 326 | "\t${3}", 327 | "})" 328 | ], 329 | "description": "Vue Composition api - watch as array" 330 | }, 331 | "Vue Composition API - watchEffect": { 332 | "prefix": "v3watcheffect", 333 | "body": ["watchEffect(() => {", "\t${1}", "})"], 334 | "description": "Vue Composition api - watchEffect" 335 | }, 336 | "Vue Composition API - Vue ref": { 337 | "prefix": "v3ref", 338 | "body": ["const ${1:name} = ref(${2:initialValue})"], 339 | "description": "Vue Ref" 340 | }, 341 | "Vue Lifecycle Hooks - onMounted": { 342 | "prefix": "v3onmounted", 343 | "body": ["onMounted(() => {${1}})"], 344 | "description": "Vue Mounted Lifecycle hook" 345 | }, 346 | "Vue Lifecycle Hooks - onBeforeMount": { 347 | "prefix": "v3onbeforemount", 348 | "body": ["onBeforeMount(() => {${1}})"], 349 | "description": "Vue onBeforeMount Lifecycle hook" 350 | }, 351 | "Vue Lifecycle Hooks - onBeforeUpdate": { 352 | "prefix": "v3onbeforeupdate", 353 | "body": ["onBeforeUpdate(() => {${1}})"], 354 | "description": "Vue onBeforeUpdate Lifecycle hook" 355 | }, 356 | "Vue Lifecycle Hooks - onUpdated": { 357 | "prefix": "v3onupdated", 358 | "body": ["onUpdated(() => {${1}})"], 359 | "description": "Vue onUpdated Lifecycle hook" 360 | }, 361 | "Vue Lifecycle Hooks - onErrorCaptured": { 362 | "prefix": "v3onerrorcaptured", 363 | "body": ["onErrorCaptured(() => {${1}})"], 364 | "description": "Vue onErrorCaptured Lifecycle hook" 365 | }, 366 | "Vue Lifecycle Hooks - onUnmounted": { 367 | "prefix": "v3onunmounted", 368 | "body": ["onUnmounted(() => {${1}})"], 369 | "description": "(destroyed) Vue onUnmounted Lifecycle hook" 370 | }, 371 | "Vue Lifecycle Hooks - onBeforeUnmount": { 372 | "prefix": "v3onbeforeunmount", 373 | "body": ["onBeforeUnmount(() => {${1}})"], 374 | "description": "(beforeDestroy) Vue onBeforeUnmount Lifecycle hook" 375 | }, 376 | "Plugin import": { 377 | "prefix": "vplugin", 378 | "body": [ 379 | "import Vue from 'vue'", 380 | "import ${1:VueCompositionApi} from '${2:@vue/composition-api}'", 381 | "", 382 | "Vue.use(${1:VueCompositionApi})" 383 | ], 384 | "description": "Import a plugin to main.js or plugins file" 385 | }, 386 | "Vue Composition API Reactive Script": { 387 | "prefix": "v3reactive-setup", 388 | "body": [ 389 | "import { reactive, toRefs } from 'vue'", 390 | "", 391 | "export default {", 392 | "\tsetup () {", 393 | "\t\tconst state = reactive({", 394 | "\t\t\t${0:count}: ${1:0},", 395 | "\t\t})", 396 | "\t", 397 | "\t\treturn {", 398 | "\t\t\t...toRefs(state),", 399 | "\t\t}", 400 | "\t}", 401 | "}" 402 | ], 403 | "description": "Vue Composition API Script with Reactive" 404 | }, 405 | "Use Composition API within Options API": { 406 | "prefix": "v3useinoptions", 407 | "body": [ 408 | "import { ${0:component} } from '@/composables/${0:component}.js'", 409 | "", 410 | "export default {", 411 | "\tsetup () {", 412 | "\t\tconst { ${1:name} } = ${0:component}()", 413 | "\t", 414 | "\t\treturn {", 415 | "\t\t\t${1:name}", 416 | "\t\t}", 417 | "\t}", 418 | "}" 419 | ], 420 | "description": "Use Composition API within Options API" 421 | } 422 | } 423 | -------------------------------------------------------------------------------- /snippets/vue-template.json: -------------------------------------------------------------------------------- 1 | { 2 | "Vue v-for": { 3 | "prefix": "vfor", 4 | "body": [ 5 | "<${1:div} v-for=\"${2:item} in ${2:item}s\" :key=\"${2:item}.id\">", 6 | "\t{{ ${2:item} }}", 7 | "" 8 | ], 9 | "description": "vfor statement" 10 | }, 11 | "Vue v-model Directive": { 12 | "prefix": "vmodel", 13 | "body": [""], 14 | "description": "v-model directive" 15 | }, 16 | "Vue v-model Number Directive": { 17 | "prefix": "vmodel-num", 18 | "body": [ 19 | "" 20 | ], 21 | "description": "v-model directive number input" 22 | }, 23 | "Vue v-on Shortcut Directive": { 24 | "prefix": "von", 25 | "body": ["@click=\"${1:handler}(${2:arg}, $event)\""], 26 | "description": "v-on click handler with arguments" 27 | }, 28 | "Vue Component with Props Binding": { 29 | "prefix": "vel-props", 30 | "body": ["<${1:component} :${1:propName}=\"${0}\">"], 31 | "description": "component element with props" 32 | }, 33 | "Vue Named Slot": { 34 | "prefix": "vslot-named", 35 | "body": [""], 36 | "description": "named slot" 37 | }, 38 | "Vue Image Source Binding": { 39 | "prefix": "vsrc", 40 | "body": [ 41 | "\"${2:altText}\"/" 42 | ], 43 | "description": "image source binding" 44 | }, 45 | "Vue Style Binding": { 46 | "prefix": "vstyle", 47 | "body": ["<${1:div} :style=\"{ fontSize: ${2:data} + 'px' }\">"], 48 | "description": "vue inline style binding" 49 | }, 50 | "Vue Style Binding Object": { 51 | "prefix": "vstyle-obj", 52 | "body": [ 53 | "<${1:div} :style=\"[${2:styleObjectA}, ${3:styleObjectB]}\">" 54 | ], 55 | "description": "vue inline style binding, objects" 56 | }, 57 | "Vue Class Binding": { 58 | "prefix": "vclass", 59 | "body": ["<${1:div} :class=\"{ ${2:className}: ${3:data} }\">"], 60 | "description": "vue class binding" 61 | }, 62 | "Vue Class Binding Object": { 63 | "prefix": "vclass-obj", 64 | "body": [ 65 | "<${1:div} :class=\"[${2:classNameA}, ${3:classNameB}]\">" 66 | ], 67 | "description": "vue class binding" 68 | }, 69 | "Vue Multiple Conditional Class Bindings": { 70 | "prefix": "vclass-obj-mult", 71 | "body": [ 72 | "<${1:div} :class=\"[${2:classNameA}, {${3:classNameB} : ${4:condition}}]\">" 73 | ], 74 | "description": "vue multiple conditional class bindings" 75 | }, 76 | "Vue Emit from Child": { 77 | "prefix": "vemit-child", 78 | "body": ["@change=\"$$emit('change', $$event.target.value)\""], 79 | "description": "Vue Emit from Child Component" 80 | }, 81 | "Vue Emit to Parent": { 82 | "prefix": "vemit-parent", 83 | "body": ["@change=\"${1:foo} = $$event\""], 84 | "description": "Vue Emit to Parent Component" 85 | }, 86 | "Vue Transition Component with JavaScript Hooks": { 87 | "prefix": "vanim", 88 | "body": [ 89 | "", 97 | "", 98 | "" 99 | ], 100 | "description": "transition component js hooks" 101 | }, 102 | "Vue Nuxt Routing Link": { 103 | "prefix": "vnuxtl", 104 | "body": ["${1:page}"], 105 | "description": "nuxt routing link" 106 | }, 107 | "Vue Named Routing Link": { 108 | "prefix": "vroutename", 109 | "body": [ 110 | "${2:LinkTitle}" 111 | ], 112 | "description": "Named routing link" 113 | }, 114 | "Vue Named Routing Link with Params": { 115 | "prefix": "vroutenameparam", 116 | "body": [ 117 | "${4:LinkTitle}" 118 | ], 119 | "description": "Named routing link w/ params" 120 | }, 121 | "Vue Path Routing Link": { 122 | "prefix": "vroutepath", 123 | "body": ["${2:LinkTitle}"], 124 | "description": "Path routing link" 125 | }, 126 | "Vue Emit from Child": { 127 | "prefix": "vemit-child", 128 | "body": ["@change=\"$emit('change', $event.target.value)\""], 129 | "description": "Vue Emit from Child Component" 130 | }, 131 | "Vue Emit to Parent": { 132 | "prefix": "vemit-parent", 133 | "body": ["@change=\"${1:foo} = $event\""], 134 | "description": "Vue Emit to Parent Component" 135 | } 136 | } -------------------------------------------------------------------------------- /snippets/vue.json: -------------------------------------------------------------------------------- 1 | { 2 | "Vue Single File Component": { 3 | "prefix": "vbase", 4 | "body": [ 5 | "", 10 | "", 11 | "", 16 | "", 17 | "" 20 | ], 21 | "description": "Base for Vue File with SCSS" 22 | }, 23 | "Vue Single File Component with SASS": { 24 | "prefix": "vbase-sass", 25 | "body": [ 26 | "", 31 | "", 32 | "", 37 | "", 38 | "" 41 | ], 42 | "description": "Base for Vue File with PostCSS" 43 | }, 44 | "Vue Single File Component with LESS": { 45 | "prefix": "vbase-less", 46 | "body": [ 47 | "", 52 | "", 53 | "", 58 | "", 59 | "" 62 | ], 63 | "description": "Base for Vue File with PostCSS" 64 | }, 65 | "Vue Single File Component with postcss": { 66 | "prefix": "vbase-pcss", 67 | "body": [ 68 | "", 73 | "", 74 | "", 79 | "", 80 | "" 83 | ], 84 | "description": "Base for Vue File with PostCSS" 85 | }, 86 | "Vue Single File Component with Css": { 87 | "prefix": "vbase-css", 88 | "body": [ 89 | "", 94 | "", 95 | "", 100 | "", 101 | "" 104 | ], 105 | "description": "Base for Vue File with CSS" 106 | }, 107 | "Vue Single File Component with Stylus": { 108 | "prefix": "vbase-styl", 109 | "body": [ 110 | "", 115 | "", 116 | "", 121 | "", 122 | "" 125 | ], 126 | "description": "Base for Vue File with Stylus" 127 | }, 128 | "Vue Single File Component with Typescript": { 129 | "prefix": "vbase-ts", 130 | "body": [ 131 | "", 136 | "", 137 | "", 144 | "", 145 | "" 148 | ], 149 | "description": "Base for Vue File with Typescript" 150 | }, 151 | "Vue Single File Component with No Style": { 152 | "prefix": "vbase-ns", 153 | "body": [ 154 | "", 159 | "", 160 | "" 165 | ], 166 | "description": "Base for Vue File with no styles" 167 | }, 168 | "Vue Single File Component Composition API": { 169 | "prefix": "vbase-3", 170 | "body": [ 171 | "", 176 | "", 177 | "", 186 | "", 187 | "" 190 | ], 191 | "description": "Base for Vue File Composition API with SCSS" 192 | }, 193 | "Vue Single File Component Setup Composition API": { 194 | "prefix": "vbase-3-setup", 195 | "body": [ 196 | "", 201 | "", 202 | "", 205 | "", 206 | "" 209 | ], 210 | "description": "Base for Vue File Setup Composition API with SCSS" 211 | }, 212 | "Vue Single File Component Composition API Reactive": { 213 | "prefix": "vbase-3-reactive", 214 | "body": [ 215 | "", 220 | "", 221 | "", 236 | "", 237 | "" 240 | ], 241 | "description": "Base for Vue File Composition API with SCSS" 242 | }, 243 | "Vue Single File Component Composition API with Typescript": { 244 | "prefix": "vbase-3-ts", 245 | "body": [ 246 | "", 251 | "", 252 | "", 262 | "", 263 | "" 266 | ], 267 | "description": "Base for Vue File Composition API - Typescript" 268 | }, 269 | "Vue Single File Component Setup Composition API with Typescript": { 270 | "prefix": "vbase-3-ts-setup", 271 | "body": [ 272 | "", 277 | "", 278 | "", 281 | "", 282 | "" 285 | ], 286 | "description": "Base for Vue File Setup Composition API - Typescript" 287 | }, 288 | "Vue Single File Component with Class based Typescript format": { 289 | "prefix": "vbase-ts-class", 290 | "body": [ 291 | "", 296 | "", 297 | "", 305 | "", 306 | "" 309 | ], 310 | "description": "Base for Vue File with Class based Typescript format" 311 | } 312 | } 313 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | --------------------------------------------------------------------------------