https://github.com/zhaolinlau/nuxt-vscode-snippets
Supercharge your Nuxt development with powerful snippets.
https://github.com/zhaolinlau/nuxt-vscode-snippets
nuxt nuxt-snippets vscode-extension vscode-snippets vue vue-snippets
Last synced: 9 months ago
JSON representation
Supercharge your Nuxt development with powerful snippets.
- Host: GitHub
- URL: https://github.com/zhaolinlau/nuxt-vscode-snippets
- Owner: zhaolinlau
- License: mit
- Created: 2025-01-02T22:36:40.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2025-01-28T14:30:15.000Z (10 months ago)
- Last Synced: 2025-02-14T20:06:01.476Z (10 months ago)
- Topics: nuxt, nuxt-snippets, vscode-extension, vscode-snippets, vue, vue-snippets
- Language: JavaScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=zhaolinlau.nuxt-vscode-snippets
- Size: 58.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Nuxt VS Code Snippets
## Description
Boost your Nuxt development with useful snippets that speed up your workflow. This extension includes snippets for Nuxt 3, Vue 3, and Pinia, making it easier and faster to write common code.
> I took my inspiration from the [vue-vscode-snippets](https://github.com/sdras/vue-vscode-snippets) extension by @sdras, the [vue3-vscode-snippets](https://github.com/ExEr7um/vue3-vscode-snippets) extension by @ExEr7um, and the [Vue-3-Code-Snippets](https://github.com/okriiza/Vue-3-Code-Snippets) extension by @okriiza.
## Features
- Nuxt 3 snippets
- Vue 3 snippets
- Pinia snippets
- Composition API snippets
- Support for JavaScript and TypeScript
## Requirements
- Visual Studio Code 1.75 or higher
## Installation
1. Open **Extensions** sidebar panel in VS Code. `View → Extensions`
2. Search for `Nuxt VS Code Snippets` by **zhaolinlau**.
3. Click **Install** to install it.
## Usage
Type part of a snippet, press `enter`, and the snippet unfolds.
## Snippets
### Nuxt
#### Components
| Prefix | Purpose |
| ------------- | --------------------------- |
| `npage` | `` |
| `nlayout` | `` |
| `nlink` | Nuxt router link |
| `nlink-param` | Nuxt router link with param |
#### Composables & Utilities
| Prefix | Purpose |
| ----------------------- | -------------------------------------------------- |
| `nfetch` | `useFetch` composable |
| `nfetch-lazy` | `useLazyFetch` composable |
| `ndfetch ` | `$fetch` |
| `ndfetch-post` | `$fetch` with method POST and Body |
| `ndfetch-put` | `$fetch` with method PUT and Body |
| `ndfetch-delete` | `$fetch` with method DELETE and Body |
| `nasyncdata` | `useAsyncData` composable |
| `nasyncdata-lazy` | `useLazyAsyncData` composable |
| `nreqheaders` | `useRequestHeaders` composable |
| `nreqfetch` | `useRequestFetch` composable |
| `ndata` | `useNuxtData` composable |
| `nrfshdata` | `refreshNuxtData` utility |
| `nclrdata` | `clearNuxtData` utility |
| `nhead` | `useHead` composable |
| `nhead-description` | `useHead` composable with description |
| `nhead-template` | `useHead` composable with title template |
| `npagemeta` | `definePageMeta` composable |
| `npagemeta-description` | `definePageMeta` composable with description |
| `npagemeta-layout` | `definePageMeta` composable with layout |
| `npagemeta-middleware` | `definePageMeta` composable with middleware |
| `npagemeta-ml` | `definePageMeta` composable with middleware layout |
| `nplugin` | Base code for Nuxt plugin |
| `nmiddleware` | Base code for Nuxt middleware |
| `nserver` | Base code for Nuxt server |
| `nerr` | `useError` composable |
| `ncerr` | `createError` utility |
| `nshwerr` | `showError` utility |
| `nclrerr` | `clearError` utility |
| `nroute` | `useRoute` composable |
| `nrouter` | `useRouter` composable |
| `nmodule` | Base code for Nuxt module |
### Vue
#### Templates
| Prefix | Purpose |
| --------------- | -------------------------------------------------------------------- |
| `vbase` | Base for Vue 3 File with `` No style |
| `vbase-scss` | Base for Vue 3 File with `<script setup>` Style `SCSS` |
| `vbase-sass` | Base for Vue 3 File with `<script setup>` Style `SASS` |
| `vbase-less` | Base for Vue 3 File with `<script setup>` Style `LESS` |
| `vbase-pcss` | Base for Vue 3 File with `<script setup>` Style `PostCSS` |
| `vbase-css` | Base for Vue 3 File with `<script setup>` Style `CSS` |
| `vbase-ts` | Base for Vue 3 File with `<script setup lang='ts'>`, No Style |
| `vbase-ts-scss` | Base for Vue 3 File with `<script setup lang='ts'>`, Style `SCSS` |
| `vbase-ts-sass` | Base for Vue 3 File with `<script setup lang='ts'>`, Style `SASS` |
| `vbase-ts-less` | Base for Vue 3 File with `<script setup lang='ts'>`, Style `LESS` |
| `vbase-ts-pcss` | Base for Vue 3 File with `<script setup lang='ts'>`, Style `PostCSS` |
| `vbase-ts-css` | Base for Vue 3 File with `<script setup lang='ts'>`, Style `CSS` |
| `vscript` | `<script setup>` |
| `vscript-ts` | `<script setup lang='ts'>` |
| `vtemplate` | `<template></template>` |
| `vfor` | `v-for` statement |
| `vslot-named` | `<template #name></template>` |
#### Components
| Prefix | Purpose |
| ------------- | ------------------- |
| `vtrans` | `<Transition>` |
| `vtransgroup` | `<TransitionGroup>` |
| `vkeepalive` | `<KeepAlive>` |
| `vtp` | `<Teleport>` |
| `vsuspense` | `<Suspense>` |
#### Scripts
| Prefix | Purpose |
| ------------------ | --------------------------- |
| `vref` | Vue `ref` |
| `vreactive` | Vue `reactive` |
| `vcomputed` | Vue `computed` |
| `vwatch` | Watcher |
| `vwatcheffect` | Watch Effect |
| `vonmounted` | onMounted hook |
| `vonbeforemount` | onBeforeMount hook |
| `vonbeforeupdate` | onBeforeUpdate hook |
| `vonupdated` | onUpdated hook |
| `vonerrorcaptured` | onErrorCaptured hook |
| `vonunmounted` | onUnmounted hook |
| `vonbeforeunmount` | onBeforeUnmount hook |
| `vdefineprops` | Define props |
| `vdefineemits` | Define emits |
| `vsingleemit` | Single emit for defineEmits |
| `vdefineslots` | Define slots |
| `vsingleslot` | Single slot for defineSlots |
| `vdefineoptions` | Define Options |
| `vdefinemodel` | Define Model |
#### Router
| Prefix | 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` |
### Pinia
| Prefix | Purpose |
| --------- | ------------------------------------------------------------ |
| `pbase` | Base code needed for a Pinia store file |
| `pbase-c` | Base code needed for a Pinia store file with Composition API |
## Contributing
This is an open source project open to anyone. Contributions are welcome [github](https://github.com/zhaolinlau/nuxt-vscode-snippets)
If you are contributing a snippet, please be sure to add the documentation for it in the tables in the README, the pull request cannot be accepted without this addition. Thanks!
## License
[MIT](https://github.com/zhaolinlau/nuxt-vscode-snippets/blob/master/LICENSE)
Copyright © 2025-Present Zhaolin Lau