Vue.js Snippets for VS Code

A comprehensive collection of Vue.js snippets for Visual Studio Code.

⚠️ Disclaimer ⚠️

This extension is not an official Vue.js product. It is a third-party extension created to enhance the Vue.js development experience in VS Code.

Credits

• Vue.js - The official Vue.js framework
• Visual Studio Code - Microsoft's code editor

Features

• Vue 3 Component templates with Script Setup
• TypeScript support for props and emits
• Composition API snippets
• Vue Router integration
• Pinia store setup
• Built-in components (Teleport, Suspense, Transition, etc.)
• Custom directives and plugins
• TypeScript type definitions and utilities
• HTML templates and form elements
• And much more!

Snippets

Basic Components

• v3 - Basic Vue 3 component with script setup
• v3props - Component with TypeScript props
• v3emits - Component with TypeScript emits
• v3comp - Component using Composition API
• v3options - Component using Options API

Composition API

• v3comp - Composition API setup with ref, computed, watch, and lifecycle hooks
• v3reactive - Reactive property setup
• v3computed - Computed property setup
• v3watch - Watcher setup
• v3mounted - Lifecycle hook (onMounted)

Routing

• v3router - Vue Router navigation setup

State Management

• v3pinia - Pinia store setup
• v3vuex - Vuex store setup

Built-in Components

• v3teleport - Teleport component
• v3suspense - Suspense component
• v3transition - Transition component
• v3transitiongroup - TransitionGroup component
• v3keepalive - KeepAlive component

Directives and Models

• v3model - v-model directive
• v3modelmod - v-model with modifier
• v3directive - Custom directive
• v3if - Conditional rendering (v-if)
• v3for - List rendering (v-for)
• v3on - Event binding (v-on)
• v3class - Dynamic class binding
• v3style - Dynamic style binding

TypeScript

• v3interface - TypeScript interface
• v3type - TypeScript type
• v3enum - TypeScript enum
• v3func - TypeScript function
• v3async - TypeScript async function
• v3generic - TypeScript generic type
• v3union - TypeScript union type
• v3intersection - TypeScript intersection type
• v3record - TypeScript Record type
• v3partial - TypeScript Partial type
• v3required - TypeScript Required type
• v3pick - TypeScript Pick type
• v3omit - TypeScript Omit type

HTML

• v3html - HTML template
• v3form - HTML form
• v3input - HTML input
• v3button - HTML button
• v3select - HTML select
• v3textarea - HTML textarea
• v3checkbox - HTML checkbox
• v3radio - HTML radio
• v3label - HTML label
• v3div - HTML div
• v3span - HTML span
• v3link - HTML link
• v3img - HTML image
• v3list - HTML list
• v3table - HTML table
• v3comp - Component usage
• v3slot - Slot usage
• v3modelinput - Form input with v-model
• v3forobj - List rendering with object

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Vue Snippets"
4. Click Install

Usage

1. Open a Vue, TypeScript, or HTML file
2. Type the snippet prefix (e.g., v3 for a basic component)
3. Press Tab to expand the snippet
4. Use Tab to navigate between placeholders

Requirements

• VS Code 1.60.0 or higher
• Vue 3 project

Contributing

We welcome your feedback and suggestions to improve these snippets.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

See CHANGELOG.md for a list of changes.

Support

If you find any issues or have suggestions, please contact the extension author.