{"_id":"vue-vscode-snippets","name":"vue-vscode-snippets","dist-tags":{"latest":"3.2.0"},"versions":{"3.2.0":{"name":"vue-vscode-snippets","displayName":"Vue VSCode Snippets","description":"Snippets that will supercharge your Vue workflow","icon":"images/vue-logo.png","version":"3.2.0","publisher":"sdras","engines":{"vscode":"^1.14.0"},"repository":{"type":"git","url":"https://github.com/sdras/vue-vscode-snippets.git"},"scripts":{"build":"vsce package -o vue-vscode-snippets-$npm_package_version.vsix","install":"yarn build && code --install-extension vue-vscode-snippets-$npm_package_version.vsix","publish":"vsce publish"},"keywords":["Vue","Vue 3","Vue 2","Composition API","Vue Snippets"],"categories":["Snippets"],"contributes":{"snippets":[{"language":"vue","path":"./snippets/vue.json"},{"language":"jade","path":"./snippets/vue-pug.json"},{"language":"html","path":"./snippets/vue-template.json"},{"language":"vue-html","path":"./snippets/vue-template.json"},{"language":"javascript","path":"./snippets/vue-script.json"},{"language":"javascript","path":"./snippets/vue-script-setup.json"},{"language":"javascript","path":"./snippets/vue-script-vuex.json"},{"language":"javascript","path":"./snippets/vue-script-router.json"},{"language":"javascript","path":"./snippets/nuxt-config.json"},{"language":"javascript","path":"./snippets/nuxt-script.json"},{"language":"typescript","path":"./snippets/vue-script.json"},{"language":"typescript","path":"./snippets/vue-script-vuex.json"},{"language":"typescript","path":"./snippets/vue-script-router.json"},{"language":"typescript","path":"./snippets/nuxt-config.json"}]},"licenseText":"MIT License\n\nCopyright (c) 2022 Sarah Drasner\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","license":"MIT","_id":"vue-vscode-snippets@3.2.0","dist":{"shasum":"86df087e5d7fc115318fb117009090d76aea2e94","integrity":"sha512-qtfDd/w0ryW+totPDTsB0gTtX4fgtK60rugA6gfwuX3pN39UNaDzE9FhLUetnNpZ+wshIjzpPPRjQ2y9yzSPnA==","tarball":"https://registry.npmjs.org/vue-vscode-snippets/-/vue-vscode-snippets-3.2.0.tgz","fileCount":23,"unpackedSize":890623,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjehJpw9QxvEeB4nPw2ISwGko+cNtghXRa50N7mqIzzAIhAO1b3B7XXxZ/2uS86OiwXaot5QesxYAYknG6W6c1tKt6"}]},"_npmUser":{"name":"bencodezen","email":"ben@bencodezen.io"},"directories":{},"maintainers":[{"name":"bencodezen","email":"ben@bencodezen.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-vscode-snippets_3.2.0_1732059071670_0.2118798253047689"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-19T23:31:11.669Z","3.2.0":"2024-11-19T23:31:12.107Z","modified":"2024-11-19T23:31:12.409Z"},"maintainers":[{"name":"bencodezen","email":"ben@bencodezen.io"}],"description":"Snippets that will supercharge your Vue workflow","keywords":["Vue","Vue 3","Vue 2","Composition API","Vue Snippets"],"repository":{"type":"git","url":"https://github.com/sdras/vue-vscode-snippets.git"},"license":"MIT","readme":"# Vue VSCode Snippets\n\n![vue-snippet-hero](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/vue-snippet-hero.gif)\n\n## Description\n\nThese snippets were built to supercharge a workflow in the most seamless manner possible.\n\nThis 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.\n\n_Versions Supported: Vue 2 and Vue 3_\n\n![SnippetDemo](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/SnippetDemo.gif)\n\n## Installation\n\n_Either_\n\n- click the extensions button (lowest square icon in the editor), and type in Vue VSCode Snippets, select the one by sdras\n\n_or_\n\n- go here [vscode Extensions Marketplace](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets)\n\n```javascript\next install Vue VSCode Snippets\n```\n\nYou can enable tab completion (recommended) by opening `Code > Preferences > Settings` (on a Mac) and applying `\"editor.tabCompletion\": \"onlySnippets\"` to your personal settings\n\n## Snippets\n\n### Vue\n\nThese snippets are meant to provide a base scaffold for your single file components (SFC).\n\n| Snippet            | Purpose                                    |\n| ------------------ | ------------------------------------------ |\n| `vbase-3-ss`       | SFC base with script setup                 |\n| `vbase-3-ss-ts`    | SFC base with script setup and TypeScript  |\n| `vbase`            | SFC base with SCSS                         |\n| `vbase-3`          | SFC Composition API with SCSS              |\n| `vbase-3-setup`    | SFC setup Composition API with SCSS        |\n| `vbase-3-setup`    | SFC setup Composition API with SCSS        |\n| `vbase-3-reactive` | SFC Composition API with Reactive and SCSS |\n| `vbase-css`        | SFC base with CSS                          |\n| `vbase-pcss`       | SFC base with PostCSS                      |\n| `vbase-styl`       | SFC base with Stylus                       |\n| `vbase-ts`         | SFC base with Typescript                   |\n| `vbase-ts-class`   | SFC base with Typescript Class Format      |\n| `vbase-3-ts`       | SFC Composition API with Typescript        |\n| `vbase-3-ts-setup` | SFC setup Composition API with Typescript  |\n| `vbase-ns`         | SFC with no styles                         |\n| `vbase-sass`       | SFC base with SASS                         |\n| `vbase-less`       | SFC base with LESS                         |\n\n### Template\n\n| Snippet           | Purpose                             |\n| ----------------- | ----------------------------------- |\n| `vfor`            | v-for directive                     |\n| `vmodel`          | Semantic v-model directive          |\n| `vmodel-num`      | Semantic v-model number directive   |\n| `von`             | v-on click handler with arguments   |\n| `vslot-named`     | Named slot                          |\n| `vel-props`       | Component element with props        |\n| `vsrc`            | Image src binding                   |\n| `vstyle`          | Inline style binding                |\n| `vstyle-obj`      | Inline style binding with objects   |\n| `vclass`          | Class binding                       |\n| `vclass-obj`      | Class binding with objects          |\n| `vclass-obj-mult` | Multiple conditional class bindings |\n| `vanim`           | Transition component with JS hooks  |\n| `vnuxtl`          | Nuxt Routing Link                   |\n| `vroutename`      | router-link Named Routing           |\n| `vroutenameparam` | router-link Named with Parameters   |\n| `vroutepath`      | router-link Path Routing Link       |\n| `vemit-child`     | Emit event from child component     |\n| `vemit-parent`    | Emit event to parent component      |\n\n### Script\n\n| Snippet           | Purpose                                                                  |\n| ----------------- | ------------------------------------------------------------------------ |\n| `vdata`           | Component data as a function                                             |\n| `vmethod`         | Vue method                                                               |\n| `vcomputed`       | Vue computed property                                                    |\n| `vwatcher`        | Vue watcher with new and old value args                                  |\n| `vbeforecreate`   | beforeCreate lifecycle method                                            |\n| `vcreated`        | created lifecycle method                                                 |\n| `vbeforemount`    | beforeMount lifecycle method                                             |\n| `vmounted`        | vmounted lifecycle method                                                |\n| `vbeforeupdate`   | beforeUpdate lifecycle method                                            |\n| `vupdated`        | updated lifecycle method                                                 |\n| `vbeforedestroy`  | beforeDestroy lifecycle method                                           |\n| `vdestroyed`      | destroyed lifecycle method                                               |\n| `vprops`          | Props with type and default                                              |\n| `vimport`         | Import one component into another                                        |\n| `vimport-dynamic` | Import one component that should be lazy loaded by webpack               |\n| `vcomponents`     | Import one component into another within the export statement            |\n| `vimport-export`  | Import one component into another and use it within the export statement |\n| `vmapstate`       | import mapState from Vuex into vue component component                   |\n| `vmapgetters`     | import mapGetters from Vuex into vue component component                 |\n| `vmapmutations`   | import mapMutations from Vuex into vue component component               |\n| `vmapactions`     | import mapActions from Vuex into vue component component                 |\n| `vfilter`         | Vue filter                                                               |\n| `vmixin`          | Create a Vue Mixin                                                       |\n| `vmixin-use`      | Bring a mixin into a component to use                                    |\n| `vc-direct`       | Vue create a custom directive                                            |\n| `vimport-lib`     | Import a library                                                         |\n| `vimport-gsap`    | Import GreenSock                                                         |\n| `vanimhook-js`    | Using the Transition component JS hooks in methods                       |\n| `vcommit`         | Commit to Vuex store in methods for mutation                             |\n| `vdispatch`       | Dispatch to Vuex store in methods for action                             |\n| `vtest`           | A simple unit testing component                                          |\n\n### Vue Composition API\n\n| Snippet             | Purpose                                               |\n| ------------------- | ----------------------------------------------------- |\n| `v3reactive`        | Vue Composition API - reactive                        |\n| `v3reactive-setup`  | Vue Composition API - reactive with setup boilerplate |\n| `v3computed`        | Vue Composition API - computed                        |\n| `v3watch`           | Vue Composition API - watcher single source           |\n| `v3watch-array`     | Vue Composition API - watch as array                  |\n| `v3watcheffect`     | Vue Composition API - watchEffect                     |\n| `v3ref`             | Vue Ref                                               |\n| `v3onmounted`       | Lifecycle hook - onMounted                            |\n| `v3onbeforemount`   | Lifecycle hook - onBeforeMount                        |\n| `v3onbeforeupdate`  | Lifecycle hook - onBeforeUpdate                       |\n| `v3onupdated`       | Lifecycle hook - onUpdated                            |\n| `v3onerrorcaptured` | Lifecycle hook - onErrorCaptured                      |\n| `v3onunmounted`     | Lifecycle hook - (destroyed) onUnmounted              |\n| `v3onbeforeunmount` | Lifecycle hook - (beforeDestroy) onBeforeUnmount      |\n| `v3useinoptions`    | Use Composition API in Options API                    |\n\n### Vuex\n\n| Snippet         | Purpose                        |\n| --------------- | ------------------------------ |\n| `vstore`        | Base for Vuex store.js         |\n| `vgetter`       | Vuex Getter                    |\n| `vmutation`     | Vuex Mutation                  |\n| `vaction`       | Vuex Action                    |\n| `vmodule`       | Vuex Module                    |\n| `vstore-import` | Import vuex store into main.js |\n| `vstore2`       | Updated Base for Vuex store    |\n\n### Vue Router\n\n| Snippet              | Purpose                                       |\n| -------------------- | --------------------------------------------- |\n| `vrouter`            | Vue Router base                               |\n| `vscrollbehavior`    | Vue Router scrollBehavior                     |\n| `vbeforeeach`        | Vue Router global guards beforeEach           |\n| `vbeforeresolve`     | Vue Router global guards beforeResolve        |\n| `vaftereach`         | Vue Router global guards afterEach            |\n| `vbeforeenter`       | Vue Router per-route guard beforeEnter        |\n| `vbeforerouteenter`  | Vue Router component guards beforeRouteEnter  |\n| `vbeforerouteupdate` | Vue Router component guards beforeRouteUpdate |\n| `vbeforerouteleave`  | Vue Router component guards beforeRouteLeave  |\n\n### Vue Config\n\n| Snippet   | Purpose                                                              |\n| --------- | -------------------------------------------------------------------- |\n| `vplugin` | Import a plugin to main.js or plugins file                           |\n| `vconfig` | vue.config.js file, example imports a sass file into every component |\n\n### Nuxt Config\n\n| Snippet | Purpose                                                 |\n| ------- | ------------------------------------------------------- |\n| `nfont` | link to include fonts in a nuxt project, in nuxt-config |\n| `ncss`  | link to css assets such as normalize                    |\n\n### Nuxt Page\n\n| Snippet           | Purpose                          |\n| ----------------- | -------------------------------- |\n| `nasyncdata`      | Nuxt asyncData                   |\n| `nasyncdataaxios` | Nuxt asyncData with Axios module |\n| `nfetch`          | Nuxt Fetch                       |\n| `nfetchaxios`     | Nuxt Fetch with Axios module     |\n| `nhead`           | Nuxt Head                        |\n| `nparam`          | Nuxt Route Params                |\n\n### Extra (plaintext)\n\n| Snippet     | Purpose                 |\n| ----------- | ----------------------- |\n| `gitignore` | .gitignore file presets |\n\n## Contributing\n\nThis is an open source project open to anyone. Contributions are welcome [github](https://github.com/sdras/vue-vscode-snippets)\n\nIf 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!\n","readmeFilename":"README.md"}