sdras / Vue Vscode Snippets
Licence: mit
These snippets were built to supercharge my workflow in the most seamless manner possible.
Stars: ✭ 1,083
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Vscode Snippets
Omi Snippets
🔖Visual Studio Code Syntax Highlighting For Single File React And Omi Components - 编写React和Omi单文件组件的VSC语法高亮插件
Stars: ✭ 149 (-86.24%)
Mutual labels: vscode, vscode-extension, snippets
Processing Vscode
A Visual Studio Code extension for the programming language Processing
Stars: ✭ 141 (-86.98%)
Mutual labels: vscode, vscode-extension, snippets
Laravel Blade Snippets Vscode
Laravel blade snippets and syntax highlight support for Visual Studio Code
Stars: ✭ 80 (-92.61%)
Mutual labels: vscode, vscode-extension, snippets
Vscode Unity Code Snippets
All snippets for Unity3D development
Stars: ✭ 26 (-97.6%)
Mutual labels: vscode, vscode-extension, snippets
Vscode R
R Extension for Visual Studio Code (execution, snippet, lint, R documantation, R Markdown)
Stars: ✭ 445 (-58.91%)
Mutual labels: vscode, vscode-extension, snippets
vue-snippets
Visual Studio Code Syntax Highlighting For Vue3 And Vue2
Stars: ✭ 25 (-97.69%)
Mutual labels: snippets, vue2, vscode-extension
Coddx Alpha
Coddx - a collection of tools that help developers program efficiently. One of the features is generating multiple files from templates quickly.
Stars: ✭ 132 (-87.81%)
Mutual labels: vscode, vscode-extension, snippets
Vscode Es7 Javascript React Snippets
Extension for Javascript/React snippets with search supporting ES7 and babel features
Stars: ✭ 435 (-59.83%)
Mutual labels: vscode, vscode-extension, snippets
Vscode Angular Snippets
Angular Snippets for VS Code
Stars: ✭ 530 (-51.06%)
Mutual labels: vscode, vscode-extension, snippets
Vscode Smarty
Smarty syntax highlight extension for Visual Studio Code
Stars: ✭ 10 (-99.08%)
Mutual labels: vscode, vscode-extension, snippets
Vscode File Templates Ext
Visual Studio code extenstion that allows to quickly create new files based on defined templates.
Stars: ✭ 39 (-96.4%)
Mutual labels: vscode, vscode-extension
Markdown index
add index to your markdown title
Stars: ✭ 38 (-96.49%)
Mutual labels: vscode, vscode-extension
Vs Code Extension Doc Zh
VS Code插件开发文档-中文版
Stars: ✭ 982 (-9.33%)
Mutual labels: vscode, vscode-extension
Hashlink Debugger
Visual Studio Code Debugger for Haxe/HashLink applications
Stars: ✭ 35 (-96.77%)
Mutual labels: vscode, vscode-extension
Vuex Flash
VueJs Flash Message Component within Vuex
Stars: ✭ 54 (-95.01%)
Mutual labels: vuejs2, vue2
Vs Code For Node Js Development Pack
🏃 A VS Code Extension Pack to get up and running with Node.js Development
Stars: ✭ 41 (-96.21%)
Mutual labels: vscode, vscode-extension
Vscode Openshift Tools
Microsoft Visual Studio Code extension for OpenShift
Stars: ✭ 51 (-95.29%)
Mutual labels: vscode, vscode-extension
Vue Prism
Simple Vue.js Syntax highlighting with Prism.js
Stars: ✭ 43 (-96.03%)
Mutual labels: vuejs2, vue2
Vscode Project Manager
Project Manager Extension for Visual Studio Code
Stars: ✭ 1,022 (-5.63%)
Mutual labels: vscode, vscode-extension
Vscode Extension
Red extension for Visual Studio Code
Stars: ✭ 34 (-96.86%)
Mutual labels: vscode, vscode-extension
Vue VSCode Snippets
Description
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, 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.
Versions Supported: Vue 2 and Vue 3
Installation
Either
- click the extensions button (lowest square icon in the editor), and type in Vue VSCode Snippets, select the one by sdras
or
- go here vscode Extensions Marketplace
ext install Vue VSCode Snippets
You can enable tab completion (recommended) by opening Code > Preferences > Settings (on a Mac) and applying "editor.tabCompletion": "onlySnippets" to your personal settings
Snippets
Vue
| Snippet | Purpose |
|---|---|
vbase |
Single file component base with SCSS |
vbase-3 |
Single File component Composition API with SCSS |
vbase-3-setup |
Single File component setup Composition API with SCSS |
vbase-3-reactive |
Single File component Composition API with Reactive and SCSS |
vbase-css |
Single file component base with CSS |
vbase-pcss |
Single file component base with PostCSS |
vbase-styl |
Single file component base with Stylus |
vbase-ts |
Single file component base with Typescript |
vbase-ts-class |
Single file component base with Typescript Class Format |
vbase-3-ts |
Single File component Composition API with Typescript |
vbase-3-ts-setup |
Single File component setup Composition API with Typescript |
vbase-ns |
Single file component with no styles |
vbase-sass |
Single file component base with SASS |
vbase-less |
Single file component base with LESS |
Template
| Snippet | Purpose |
|---|---|
vfor |
v-for directive |
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 |
vstyle-obj |
Inline style binding with objects |
vclass |
Class binding |
vclass-obj |
Class binding with objects |
vclass-obj-mult |
Multiple conditional class bindings |
vanim |
Transition component with JS hooks |
vnuxtl |
Nuxt Routing Link |
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 |
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
| Snippet | Purpose |
|---|---|
vstore |
Base for Vuex store.js |
vgetter |
Vuex Getter |
vmutation |
Vuex Mutation |
vaction |
Vuex Action |
vmodule |
Vuex Module |
vstore-import |
Import vuex store into main.js |
vstore2 |
Updated Base for Vuex store |
Vue Router
| Snippet | Purpose |
|---|---|
vrouter |
Vue Router base |
vscrollbehavior |
Vue Router scrollBehavior |
vbeforeeach |
Vue Router global guards beforeEach |
vbeforeresolve |
Vue Router global guards beforeResolve |
vaftereach |
Vue Router global guards afterEach |
vbeforeenter |
Vue Router per-route guard beforeEnter |
vbeforerouteenter |
Vue Router component guards beforeRouteEnter |
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 |
|---|---|
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 |
|---|---|
gitignore |
.gitignore file presets |
Contributing
This is an open source project open to anyone. Contributions are welcome github
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!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].