xSnippets - Your Ultimate Snippets Extension for Next.js, React, Vue.js, Svelte, Prisma, Drizzle and More! 🚀✨ Harness the power of xSnippets to boost your productivity in web development. Dive into a world of efficient coding with snippets tailored for popular frameworks. 🌐💻 Unleash the potential
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
xSnippets - Your Ultimate Snippets Extension for Next.js, React, Vue.js, Svelte, Prisma, tRPC, Drizzle and More! 🚀✨ Harness the power of xSnippets to boost your productivity in web development. Dive into a world of efficient coding with snippets tailored for popular frameworks. 🌐💻 Unleash the potential of your favorite frameworks with xSnippets.
🌐 Efficient Coding: Boost your productivity with snippets designed for popular web frameworks.
🎨 Framework Agnostic: Write code seamlessly across multiple frameworks.
💻 Versatile Snippets: Includes a wide range of snippets for components, hooks, routing, and more.
🧰 Flexible Usage: Easy-to-use snippets with intuitive prefixes for quick insertion.
Usage
Open JavaScript or TypeScript or React, Next, Vue, Svelte, Remix file in VS Code.
Type the snippet prefix and press Tab to insert the snippet.
xSnippets - Available Snippets
Next.js Snippets (TypeScript)
Snippet Prefix
Purpose
nxTSpg or nextTS_Page
Next.js Page with TypeScript interface
nxTSpge or nextTS_PageExport
Next.js Page with TypeScript interface (exported function)
nxTSapge or nextTS_ArrowPageExport
Next.js Page with TypeScript interface (arrow function export)
nxTSapg or nextTS_ArrowPage
Next.js Page with TypeScript interface (arrow function)
nximg
Next.js usage of Image Component
nxlink
Next.js Link Component
nxerr
Next.js Error Component with TypeScript
nxTSdynamicMetaData
Generates Next.js metadata with TypeScript types
nxTSlayout
Next.js Layout Component with TypeScript
nxTSmiddleware
Next.js Middleware with TypeScript
trpc_init
Initialize tRPC
Next.js Snippets (JavaScript)
Snippet Prefix
Purpose
nextpage or nxpg
Creates new Next.js 14 Page
nximg
Next.js usage of Image Component
nxlink
Next.js Link Component
Vue Snippets
Snippet Prefix
Purpose
vuepg_css
Vue 3 File with TypeScript & CSS
vuepg
Vue 3 File with TypeScript, no style
vuedefineProps
Vue DefineProps Defaults
vfor
Vue v-for statement
vuerouter
Vue Router
vuescrollbehavior
Vue Router Scroll Behavior
Svelte Snippets
Snippet Prefix
Purpose
svpg
Creates the template for Svelte
svpgTS
Create Svelte template with TypeScript
sv_slot
Create a Svelte template with slot
sv_TS-slot
Create a Svelte template with slot and TypeScript
sv_lifecycle-mount
onMount lifecycle function for Svelte
sv_lifecycle-destroy
onDestroy lifecycle function for Svelte
Nuxt.js Snippets
Snippet Prefix
Purpose
nuxt_link
Nuxt router link
nuxt_link-param
Nuxt router link with params
nuxt_fetch
Nuxt useFetch
nuxt_fetch-lazy
Nuxt useLazyFetch
nuxt_asyncdata
Nuxt useAsyncData
nuxt_asyncdata-lazy
Nuxt useLazyAsyncData
nuxt_pagemeta
Nuxt definePageMeta
nuxt_seo
Nuxt useSeoMeta
nuxt_seo-template
Nuxt useSeoMeta with title template
nuxt_seo-server
Nuxt useServerSeoMeta
nuxt_seo-server-template
Nuxt useServerSeoMeta with title template
nuxt_plugin
Nuxt plugin defaults
nuxt_middleware
Nuxt middleware defaults
nuxt_serverroute
Nuxt server route defaults
Acknowledgments
xSnippets aims to simplify web development across various frameworks. It is a community-driven project created for the benefit of developers worldwide. Join us in enhancing the web development experience!
💻 Streamline Your Web Development with xSnippets! 💻
