{"id":19111865,"url":"https://github.com/okriiza/vue-3-code-snippets","last_synced_at":"2025-10-29T16:10:39.976Z","repository":{"id":119632533,"uuid":"602024105","full_name":"okriiza/Vue-3-Code-Snippets","owner":"okriiza","description":"Vue 3 Code Snippets for Visual Studio Code","archived":false,"fork":false,"pushed_at":"2025-10-06T10:00:48.000Z","size":42,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-06T11:39:32.174Z","etag":null,"topics":["nuxt","nuxt3","nuxt3-snippets","pinia-snippets","snippets","vue","vue3","vue3-composition-api"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=RendiOkriza.vue-3-code-snippets","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/okriiza.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-15T10:38:52.000Z","updated_at":"2025-10-06T10:00:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"0d367b44-c002-4451-9e8e-5bdd8510014b","html_url":"https://github.com/okriiza/Vue-3-Code-Snippets","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/okriiza/Vue-3-Code-Snippets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okriiza%2FVue-3-Code-Snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okriiza%2FVue-3-Code-Snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okriiza%2FVue-3-Code-Snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okriiza%2FVue-3-Code-Snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/okriiza","download_url":"https://codeload.github.com/okriiza/Vue-3-Code-Snippets/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okriiza%2FVue-3-Code-Snippets/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281651812,"owners_count":26538133,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-29T02:00:06.901Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt","nuxt3","nuxt3-snippets","pinia-snippets","snippets","vue","vue3","vue3-composition-api"],"created_at":"2024-11-09T04:30:05.653Z","updated_at":"2025-10-29T16:10:39.971Z","avatar_url":"https://github.com/okriiza.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue 3 Code Snippets for Visual Studio Code\n\n![GitHub](https://img.shields.io/github/license/okriiza/Vue-3-Code-Snippets)\n![Vue Version](https://img.shields.io/badge/vue-3-%234FC08D?logo=vuedotjs)\n\n## Description\n\nA VSCode extension to provide snippets for Vue 3, Nuxt 3 and Pinia.\n\n\u003e I took my inspiration from [vue-vscode-snippets](https://github.com/sdras/vue-vscode-snippets) extension made by @sdras.\n\u003e\n\u003e I took my inspiration from [vue3-vscode-snippets](https://github.com/ExEr7um/vue3-vscode-snippets) extension made by @ExEr7um.\n\n## Features\n\n- Vue 3 snippets\n- Nuxt 3 snippets\n- Pinia snippets\n- Composition API snippets\n- Support for JavaScript and TypeScript\n\n## Usage\n\nType part of a snippet, press `enter`, and the snippet unfolds.\n\n## Snippets\n\n### Support File `.vue`\n\n| Prefix           | Purpose                                                               |\n| ---------------- | --------------------------------------------------------------------- |\n| `vstart`         | start for Vue 3 File with `\u003cscript setup\u003e` No style                   |\n| `vstart-scss`    | start for Vue 3 File with `\u003cscript setup\u003e` Style `SCSS`               |\n| `vstart-sass`    | start for Vue 3 File with `\u003cscript setup\u003e` Style `SASS`               |\n| `vstart-less`    | start for Vue 3 File with `\u003cscript setup\u003e` Style `LESS`               |\n| `vstart-pcss`    | start for Vue 3 File with `\u003cscript setup\u003e` Style `PostCSS`            |\n| `vstart-css`     | start for Vue 3 File with `\u003cscript setup\u003e` Style `CSS`                |\n| `vstart-ts`      | start for Vue 3 File with `\u003cscript setup lang='ts'\u003e`, No Style        |\n| `vstart-ts-scss` | start for Vue 3 File with `\u003cscript setup lang='ts'\u003e`, Style `SCSS`    |\n| `vstart-ts-sass` | start for Vue 3 File with `\u003cscript setup lang='ts'\u003e`, Style `SASS`    |\n| `vstart-ts-less` | start for Vue 3 File with `\u003cscript setup lang='ts'\u003e`, Style `LESS`    |\n| `vstart-ts-pcss` | start for Vue 3 File with `\u003cscript setup lang='ts'\u003e`, Style `PostCSS` |\n| `vstart-ts-css`  | start for Vue 3 File with `\u003cscript setup lang='ts'\u003e`, Style `CSS`     |\n\n| Prefix        | Purpose                       |\n| ------------- | ----------------------------- |\n| `vscript`     | `\u003cscript setup\u003e`              |\n| `vscript-ts`  | `\u003cscript setup lang='ts'\u003e`    |\n| `vtemplate`   | `\u003ctemplate\u003e\u003c/template\u003e`       |\n| `vfor`        | `v-for` statement             |\n| `vslot-named` | `\u003ctemplate #name\u003e\u003c/template\u003e` |\n\n- Nuxt\n\n| Prefix        | Purpose                     |\n| ------------- | --------------------------- |\n| `nlink`       | Nuxt router link            |\n| `nlink-param` | Nuxt router link with param |\n\n### Support File `.js, .ts`\n\n- Vue Router\n\n| Prefix               | Purpose                                         |\n| -------------------- | ----------------------------------------------- |\n| `vrouter`            | Vue Router start                                |\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- Pinia\n\n| Prefix     | Purpose                                                       |\n| ---------- | ------------------------------------------------------------- |\n| `pstart`   | Start code needed for a Pinia store file                      |\n| `pstart-c` | Start code needed for a Pinia store file with Composition API |\n\n### Support File `.vue, .js, .ts`\n\n- Vue\n\n| Prefix             | Purpose                     |\n| ------------------ | --------------------------- |\n| `vref`             | Vue `ref`                   |\n| `vreactive`        | Vue `reactive`              |\n| `vcomputed`        | Vue `computed`              |\n| `vwatch`           | Watcher                     |\n| `vwatcheffect`     | Watch Effect                |\n| `vonmounted`       | onMounted hook              |\n| `vonbeforemount`   | onBeforeMount hook          |\n| `vonbeforeupdate`  | onBeforeUpdate hook         |\n| `vonupdated`       | onUpdated hook              |\n| `vonerrorcaptured` | onErrorCaptured hook        |\n| `vonunmounted`     | onUnmounted hook            |\n| `vonbeforeunmount` | onBeforeUnmount hook        |\n| `vdefineprops`     | Define props                |\n| `vdefineemits`     | Define emits                |\n| `vsingleemit`      | Single emit for defineEmits |\n| `vdefineslots`     | Define slots                |\n| `vsingleslot`      | Single slot for defineSlots |\n| `vdefineoptions`   | Define Options              |\n| `vdefinemodel`     | Define Model                |\n\n- Nuxt\n\n| Prefix                  | Purpose                                            |\n| ----------------------- | -------------------------------------------------- |\n| `nfetch`                | `useFetch` composable                              |\n| `nfetch-lazy`           | `useLazyFetch` composable                          |\n| `ndfetch    `           | `$Fetch`                                           |\n| `ndfetch-post`          | `$Fetch` with method POST and Body                 |\n| `ndfetch-put`           | `$Fetch` with method PUT and Body                  |\n| `ndfetch-delete`        | `$Fetch` with method DELETE and Body               |\n| `nasyncdata`            | `useAsyncData` composable                          |\n| `nasyncdata-lazy`       | `useLazyAsyncData` composable                      |\n| `nhead`                 | `useHead` composable                               |\n| `nhead-description`     | `useHead` composable with description              |\n| `nhead-template`        | `useHead` composable with title template           |\n| `npagemeta`             | `definePageMeta` composable                        |\n| `npagemeta-description` | `definePageMeta` composable with description       |\n| `npagemeta-layout`      | `definePageMeta` composable with layout            |\n| `npagemeta-middleware`  | `definePageMeta` composable with middleware        |\n| `npagemeta-ml`          | `definePageMeta` composable with middleware layout |\n| `nplugin`               | Start code for Nuxt plugin                         |\n| `nmiddleware`           | Start code for Nuxt middleware                     |\n| `nserver`               | Start code for Nuxt server                         |\n\n## License\n\n[MIT](https://github.com/okriiza/Vue-3-Code-Snippets/blob/main/LICENSE) © [Rendi Okriza Putra](https://github.com/okriiza)\n\n**Enjoy!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fokriiza%2Fvue-3-code-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fokriiza%2Fvue-3-code-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fokriiza%2Fvue-3-code-snippets/lists"}