Modern Vue Snippets
579+ fully-typed Vue 3 snippets with auto-import management for the Composition API + TypeScript era.
Covers Vue 3 core, VueUse, Nuxt, Pinia, and Vue Router. Every snippet ships with exact type definitions, sensible defaults, and educational descriptions.
How It Works
- Type a prefix (
vc, vu, vn, vr) in a .vue, .ts, or .js file
- Pick a snippet from the autocomplete list
- The extension automatically moves the import to the top of your file — merging with existing imports from the same source, or adding after the last import / below
<script setup> / at the beginning of the file
Nuxt users: set includeImports to false to strip imports entirely (Nuxt auto-imports them).
Snippet Collections
| Prefix |
Library |
Count |
Example |
vc |
Vue 3 Core |
172 |
vcRef, vcComputed, vcWatch, vcDefineProps |
vc |
DOM Components |
124 |
vcTransition, vcTeleport, vcSuspense |
vu |
VueUse |
193 |
vuUseMouse, vuUseLocalStorage, vuUseFetch |
vn |
Nuxt |
78 |
vnAsyncData, vnFetch, vnUseHead, vnUseSeoMeta |
vr |
Vue Router |
12 |
vrUseRoute, vrUseRouter, vrRouterLink |
Configuration
{
"vueCompositionTsSnippets.autoSortImports": true,
"vueCompositionTsSnippets.includeImports": true
}
autoSortImports — enable/disable automatic import management (default: true)includeImports — set to false for Nuxt projects that use auto-imports (default: true)
Import Handling
When you insert a snippet that contains an import statement, the extension:
- Detects the snippet by checking if inserted text has
import { } from statements whose names appear in the code below
- Strips the import lines from where the snippet was inserted
- Places them correctly:
- If the file already has imports — merges or appends after the last one
- If no imports exist in a
.vue file — inserts below <script setup> (or <script>)
- If no imports exist in a
.ts/.js file — inserts at the beginning of the file
- Merges when the source matches an existing import:
import { ref } + import { computed } from 'vue' becomes import { computed, ref } from 'vue'
Type imports are preserved inline: import { ref, type Ref } from 'vue'.
Examples
Vue 3 Component
Type vcRef then vcComputed:
<script setup lang="ts">
import { computed, ref } from 'vue';
const count = ref(0);
const doubled = computed(() => count.value * 2);
</script>
VueUse
Type vuUseMouse:
<script setup lang="ts">
import { useMouse } from '@vueuse/core';
const { x, y, sourceType } = useMouse();
</script>
Nuxt Data Fetching
Type vnAsyncData:
<script setup lang="ts">
const { data, pending, error } = await useAsyncData('posts', () => {
return $fetch('/api/posts');
});
</script>
Development
npm install
npm run compile # build extension
npm run compile-tests && npm test # run 61 tests
npm run package # production build
The import logic lives in src/imports.ts (pure functions, no VS Code dependency). The VS Code glue is in src/extension.ts. Tests are in src/test/extension.test.ts.
License
MIT
Links
