Modern Vue Snippets - VS Code Extension

579+ fully-typed Vue 3+ snippets with intelligent auto-imports, TypeScript support, and zero-dependency philosophy

A comprehensive collection of modern Vue.js code snippets built for the Composition API/TypeScript era. Every snippet is meticulously crafted with exact type definitions, educational descriptions, and VSCode-optimized syntax.

Recently audited and verified against latest Vue 3, VueUse, and Nuxt type definitions. For any issues which may be present due to large scope, contact ozgur.seyidoglu.sw@gmail.com Thanks in advance!

✨ Features

🎯 Comprehensive Coverage

• 579+ Total Snippets across 5 specialized collections
• 100% TypeScript Support with exact type definitions from Vue/VueUse
• VSCode Optimized with standard placeholder syntax and sequential numbering

🔧 Smart Development Experience

• Auto Import Management - Intelligent import sorting and deduplication
• Nuxt Compatible - Optional import removal for auto-import environments
• Educational Descriptions - Every snippet explains when and why to use it
• Prefix Conventions - Library-specific prefixes for easy discovery

🏗️ Vue-First Architecture

• Composition API Only - No Options API clutter
• Zero Dependencies - Solve with Vue APIs before adding libraries
• TypeScript Rigor - Strict typing with proper generics and interfaces
• Performance Optimized - Memoized computations and efficient patterns

📦 Snippet Collections

🔥 TS.code-snippets (172 snippets)

Vue 3 Core APIs with vc prefix

// Reactivity
vcRef          // ref<T>(initialValue)
vcComputed     // computed<T>(getter)
vcReactive     // reactive<T>(object)
vcWatch        // watch(source, callback, options)

// Lifecycle
vcOnMounted    // onMounted(callback)
vcOnUnmounted  // onUnmounted(callback)
vcOnUpdated    // onUpdated(callback)

// Component Logic
vcDefineProps  // defineProps<T>()
vcDefineEmits  // defineEmits<T>()
vcDefineExpose // defineExpose<T>()

🎨 DOM.code-snippets (124 snippets)

Vue DOM Components with vc prefix

<!-- Transitions -->
<vcTransition name="slide" mode="out-in">
  <div v-if="isVisible">Content</div>
</vcTransition>

<!-- Teleport -->
<vcTeleport to="#modal">
  <div class="modal">Modal Content</div>
</vcTeleport>

<!-- Suspense -->
<vcSuspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <LoadingSpinner />
  </template>
</vcSuspense>

🚀 VU.code-snippets (193 snippets)

VueUse Composables with vu prefix

// State Management
vuUseLocalStorage    // useLocalStorage<T>(key, defaultValue)
vuUseSessionStorage  // useSessionStorage<T>(key, defaultValue)
vuUseStorage         // useStorage<T>(key, defaultValue, storage)

// Async Operations
vuUseAsyncState      // useAsyncState<T>(asyncFn, initialState)
vuUseAsyncComputed   // asyncComputed<T>(asyncFn, initialValue)

// UI Interactions
vuUseDraggable       // useDraggable(target, options)
vuUseClickOutside    // onClickOutside(target, handler)
vuUseElementSize     // useElementSize(target)

// Network & Data
vuUseFetch           // useFetch<T>(url, options)
vuUseWebSocket       // useWebSocket(url, options)

🌐 NX.code-snippets (78 snippets)

Nuxt.js Specific Patterns with vn prefix

// Data Fetching
vnAsyncData          // useAsyncData<T>(key, asyncFn)
vnFetch              // useFetch<T>(url, options)
vnLazyAsyncData      // useLazyAsyncData<T>(key, asyncFn)

// Nuxt Composables
vnUseRoute           // useRoute()
vnUseRouter          // useRouter()
vnUseHead            // useHead(head)
vnUseSeoMeta         // useSeoMeta(meta)

// Server-Side
vnServerHandler      // defineEventHandler(async (event) => {})
vnServerMiddleware   // defineNitroPlugin((nitroApp) => {})

🛣️ RP.code-snippets (12 snippets)

Vue Router Patterns with vr prefix

// Router Components
<vrRouterLink to="/path" active-class="active">
  Link Text
</vrRouterLink>

<vrRouterView />

// Router Composables
vrUseRoute           // useRoute()
vrUseRouter          // useRouter()
vrUseRouteQuery      // useRouteQuery(key, defaultValue)

🎯 Prefix Conventions

⚙️ Configuration

The extension provides configurable options in VS Code settings:

{
  "vueCompositionTsSnippets.autoSortImports": true,
  "vueCompositionTsSnippets.includeImports": true
}

Options

• autoSortImports (default: true) - Automatically sort and organize imports
• includeImports (default: true) - Include import statements (disable for Nuxt auto-imports)

🚀 Getting Started

1. Install the Extension

   • Search for "Modern Vue Snippets" in VS Code Extensions
   • Or install from the VS Code Marketplace

2. Start Typing

   • In .vue, .ts, or .js files
   • Type any prefix (e.g., vc, vu, vn) to see available snippets
   • Use Ctrl+Space (or Cmd+Space on Mac) to trigger suggestions

3. Customize

   • Adjust settings in VS Code preferences
   • Disable import inclusion for Nuxt projects
   • Configure auto-sorting behavior

📚 Usage Examples

Basic Vue 3 Component

<script setup lang="ts">
// Type vcDefineProps and press Tab
interface Props {
  title: string;
  count?: number;
}

const props = defineProps<Props>();

// Type vcRef and press Tab
const message = ref<string>('Hello Vue!');

// Type vcComputed and press Tab
const displayTitle = computed(() => `${props.title} (${props.count || 0})`);
</script>

<template>
  <div>
    <h1>{{ displayTitle }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

Nuxt.js Page with Data Fetching

<script setup lang="ts">
// Type vnAsyncData and press Tab
interface Post {
  id: number;
  title: string;
  content: string;
}

const { data: posts, pending, error } = await useAsyncData<Post[]>('posts', () => {
  return $fetch('/api/posts');
});

// Type vnUseHead and press Tab
useHead({
  title: 'My Nuxt App',
  meta: [
    { name: 'description', content: 'A modern Nuxt.js application' }
  ]
});
</script>

VueUse Integration

<script setup lang="ts">
// Type vuUseLocalStorage and press Tab
const theme = useLocalStorage<'light' | 'dark'>('theme', 'light');

// Type vuUseClickOutside and press Tab
const dropdownRef = ref<HTMLElement>();
const isOpen = ref(false);

onClickOutside(dropdownRef, () => {
  isOpen.value = false;
});

// Type vuUseElementSize and press Tab
const { width, height } = useElementSize(dropdownRef);
</script>

🎨 Snippet Features

✅ TypeScript Integration

• All snippets include proper TypeScript types
• Generic support for flexible typing
• Exact type definitions from Vue/VueUse source

✅ VSCode Optimization

• Standard placeholder syntax (${1:placeholder})
• Sequential numbering for smooth navigation
• Proper scope definitions for language-specific activation

✅ Educational Content

• Every snippet includes a description explaining when to use it
• Best practices and performance considerations
• Real-world usage patterns

✅ Quality Assurance

• 100% JSON validation
• Type accuracy against actual TypeScript definitions
• Consistent naming conventions and structure

🔧 Development

Prerequisites

• Node.js 18+
• VS Code Extension Development Tools

Setup

git clone https://github.com/ozJSey/vue-comp-ts-snippets.git
cd vue-comp-ts-snippets
npm install

Building

npm run compile      # Compile TypeScript
npm run package      # Package for production
npm run test         # Run tests

Contributing

1. Fork the repository
2. Create a feature branch
3. Add snippets following the established patterns
4. Ensure JSON validation passes
5. Submit a pull request

📄 License

MIT License - see LICENSE file for details.

🤝 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Documentation: Wiki

🙏 Acknowledgments

• Vue.js Team for the amazing Composition API
• VueUse Team for the comprehensive utility library
• Nuxt.js Team for the powerful framework
• VS Code Team for the excellent extension platform

Made with ❤️ for the Vue.js community

Empowering Vue developers with 579+ production-ready snippets