50 Most Useful Vue.js Snippets

I. Basic Component Structures

1. Functional Component (Vue 3 setup syntax)

<script setup>
const greeting = ‘Hello World’;
</script>

<template>
<h1>{{ greeting }}</h1>
</template>

…


This content originally appeared on DEV Community and was authored by Software Developer

I. Basic Component Structures

1. Functional Component (Vue 3 setup syntax) 

<script setup>
const greeting = 'Hello World';
</script>

<template>
  <h1>{{ greeting }}</h1>
</template>

2. Props with Type and Default 

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps({
  name: { type: String, default: 'Vue User' }
});
</script>

<template>
  <h2>Hello, {{ props.name }}!</h2>
</template>

3. Emit Custom Event 

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['submit']);

function handleClick() {
  emit('submit', { success: true });
}
</script>

<template>
  <button @click="handleClick">Submit</button>
</template>

II. Reactive State and Computed

4. ref for Reactive Primitive 

<script setup>
import { ref } from 'vue';

const count = ref(0);
function increment() {
  count.value++;
}
</script>

<template>
  <button @click="increment">Clicked {{ count }} times</button>
</template>

5. reactive for Object State 

<script setup>
import { reactive } from 'vue';

const user = reactive({ name: 'Alice', age: 25 });
function increaseAge() {
  user.age++;
}
</script>

<template>
  <p>{{ user.name }} is {{ user.age }} years old.</p>
  <button @click="increaseAge">Happy Birthday</button>
</template>

6. Computed Property 

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const double = computed(() => count.value * 2);
</script>

<template>
  <p>Count: {{ count }}</p>
  <p>Double: {{ double }}</p>
  <button @click="count++">Increment</button>
</template>

III. Lifecycle Hooks

7. onMounted Hook 

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component mounted');
});
</script>

8. watch Example 

<script setup>
import { ref, watch } from 'vue';

const inputValue = ref('');
watch(inputValue, (newVal, oldVal) => {
  console.log(`Value changed from ${oldVal} to ${newVal}`);
});
</script>

<template>
  <input v-model="inputValue" placeholder="Type here" />
</template>

IV. Templates & Directives

9. Conditional Rendering with v-if 

<template>
  <p v-if="isLoggedIn">Welcome back!</p>
  <p v-else>Please log in.</p>
</template>

<script setup>
import { ref } from 'vue';

const isLoggedIn = ref(false);
</script>

10. List Rendering with v-for 

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' }
];
</script>

11. Custom Event Binding with v-on 

<my-button @click="handleClick" />

<script setup>
function handleClick() {
  alert('Button clicked!');
}
</script>

V. Composition API Advanced

12. provide and inject 

// Provider.vue
<script setup>
import { provide } from 'vue';

const theme = 'dark';
provide('theme', theme);
</script>

// Consumer.vue
<script setup>
import { inject } from 'vue';

const theme = inject('theme', 'light');
</script>

<template>
  <p>The theme is: {{ theme }}</p>
</template>

13. Custom Composable Hook 

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}

VI. Forms and Two-way Binding

14. v-model on Input 

<template>
  <input v-model="text" placeholder="Type something" />
  <p>You typed: {{ text }}</p>
</template>

<script setup>
import { ref } from 'vue';
const text = ref('');
</script>

15. Custom v-model Binding in Component 

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script setup>
defineProps(['modelValue']);
</script>

VII. Router Snippets

16. Programmatic Navigation 

import { useRouter } from 'vue-router';

const router = useRouter();
function goHome() {
  router.push({ name: 'home' });
}

17. Get Current Route Params 

import { useRoute } from 'vue-router';

const route = useRoute();
const id = route.params.id;

VIII. Vuex & Pinia State Management (Pinia example)

18. Define Pinia Store 

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({ name: 'John', age: 30 }),
  actions: { incrementAge() { this.age++ } }
});

19. Using Pinia Store in Component 

<script setup>
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
</script>

<template>
  <p>{{ userStore.name }} is {{ userStore.age }} years old.</p>
  <button @click="userStore.incrementAge">Happy Birthday</button>
</template>

IX. Slots & Scoped Slots

20. Basic Default Slot 

<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

21. Scoped Slot Example 

<template>
  <BaseList :items="items" v-slot="{ item }">
    <p>{{ item.name }}</p>
  </BaseList>
</template>

X. Provide Common Utility Snippets

22. Debounce Input Using Watch 

import { ref, watch } from 'vue';
import { debounce } from 'lodash';

const searchTerm = ref('');
const debouncedSearchTerm = ref('');

watch(searchTerm, debounce((val) => {
  debouncedSearchTerm.value = val;
}, 300));

23. Fetch Data on Mounted 

import { ref, onMounted } from 'vue';
import axios from 'axios';

const data = ref(null);

onMounted(async () => {
  const response = await axios.get('/api/data');
  data.value = response.data;
});

XI. Transition & Animation

24. Simple Fade Transition 

<template>
  <transition name="fade">
    <p v-if="show">Hello with fade</p>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

XII. Common Patterns & Best Practices

25. Lazy Load Component 

<script setup>
import { defineAsyncComponent } from 'vue';

const LazyComp = defineAsyncComponent(() => import('./LazyComponent.vue'));
</script>

<template>
  <LazyComp />
</template>

26. Error Handling with try/catch in setup 

import { ref } from 'vue';

const error = ref(null);

async function fetchData() {
  try {
    const data = await apiCall();
  } catch (e) {
    error.value = e.message;
  }
}

XIII. Computed Watcher Simple Pattern

27. Watch with Computed Usage 

import { ref, computed, watch } from 'vue';

const search = ref('');
const searchLength = computed(() => search.value.length);

watch(searchLength, (newVal) => {
  console.log(`Search length changed: ${newVal}`);
});

XIV. Pagination Component

28. Basic Pagination Logic 

<script setup>
import { ref, computed } from 'vue';

const currentPage = ref(1);
const itemsPerPage = 10;

const pagedItems = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage;
  return items.value.slice(start, start + itemsPerPage);
});
</script>

XV. Event Modifiers

29. Prevent Default and Stop Propagation 

<button @click.prevent.stop="handleClick">Click me</button>

XVI. Dynamic Classes and Styles

30. Object Syntax for Class Binding 

<div :class="{ active: isActive, disabled: isDisabled }"></div>

31. Inline Dynamic Styles 

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

XVII. Router Link Active Classes

32. Highlight Active Nav Link 

<router-link to="/" active-class="active-link">Home</router-link>

XVIII. Provide/Inject with Reactivity

33. Reactive Provide/Inject 

import { reactive, provide, inject } from 'vue';

const state = reactive({ count: 0 });

provide('state', state);

// In child
const state = inject('state');

XIX. Watch for Deep Changes

34. Watching Deep Objects 

watch(
  () => user,
  () => {
    console.log('User changed!');
  },
  { deep: true }
);

XX. Template Ref Usage

35. Access DOM Element with ref 

<script setup>
import { ref, onMounted } from 'vue';

const input = ref(null);

onMounted(() => {
  input.value.focus();
});
</script>

<template>
  <input ref="input" />
</template>

XXI. Slots with Fallback Content

36. Default Slot Content 

<slot>Default content if no slot provided</slot>

XXII. Form Validation Using Watch

37. Simple Validation Example 

import { ref, watch } from 'vue';

const email = ref('');
const isValid = ref(false);

watch(email, (newVal) => {
  isValid.value = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newVal);
});

XXIII. Multiple Emits with Typescript

38. Defining Emits with Types 

const emit = defineEmits<{
  (e: 'update', value: string): void;
  (e: 'delete'): void;
}>();

XXIV. Dynamic Component Rendering

39. Render Based on Variable 

<component :is="currentComponent" />

XXV. Provide Scoped Slots Flexibility

40. Scoped Slots Passing Props 

<slot :item="item"></slot>

XXVI. Async Setup

41. Setup with Async/Await 

<script setup>
import { ref } from 'vue';

const data = ref(null);

async function fetchData() {
  const res = await fetch('/api/data');
  data.value = await res.json();
}

fetchData();
</script>

XXVII. WatchEffect Usage

42. Watching Reactive Dependencies 

import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(`Count is: ${count.value}`);
});

XXVIII. Provide Default Slot Props

43. Default Values in Slots 

<slot :user="user ?? {name:'Guest'}"></slot>

XXIX. Template Directive Shorthands

44. Shorthand for v-bind & v-on 

<!-- v-bind:href -->
<a :href="link">Link</a>

<!-- v-on:click -->
<button @click="handleClick">Click</button>

XXX. Use key for List Performance

45. Key with Unique IDs 

<li v-for="item in items" :key="item.id">{{ item.title }}</li>

XXXI. Filters (Deprecated but still used)

46. Custom Filter Example 

app.config.globalProperties.$filters = {
  capitalize(value) {
    if (!value) return '';
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
};

XXXII. Provide Reusable Directive

47. v-focus Directive 

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

XXXIII. Transition Modes

48. Transition with Mode 

<transition name="fade" mode="out-in">
  <component :is="page" />
</transition>

XXXIV. Provide UseSlots & UseAttrs

49. Access \$slots and \$attrs in script 

import { useSlots, useAttrs } from 'vue';

const slots = useSlots();
const attrs = useAttrs();

XXXV. Template Teleport

50. Teleport Element Outside Root 

<teleport to="body">
  <div class="modal">Modal Content</div>
</teleport>


This content originally appeared on DEV Community and was authored by Software Developer


Print Share Comment Cite Upload Translate Updates
APA

Software Developer | Sciencx (2025-10-12T12:50:00+00:00) 50 Most Useful Vue.js Snippets. Retrieved from https://www.scien.cx/2025/10/12/50-most-useful-vue-js-snippets/

MLA
" » 50 Most Useful Vue.js Snippets." Software Developer | Sciencx - Sunday October 12, 2025, https://www.scien.cx/2025/10/12/50-most-useful-vue-js-snippets/
HARVARD
Software Developer | Sciencx Sunday October 12, 2025 » 50 Most Useful Vue.js Snippets., viewed ,<https://www.scien.cx/2025/10/12/50-most-useful-vue-js-snippets/>
VANCOUVER
Software Developer | Sciencx - » 50 Most Useful Vue.js Snippets. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/10/12/50-most-useful-vue-js-snippets/
CHICAGO
" » 50 Most Useful Vue.js Snippets." Software Developer | Sciencx - Accessed . https://www.scien.cx/2025/10/12/50-most-useful-vue-js-snippets/
IEEE
" » 50 Most Useful Vue.js Snippets." Software Developer | Sciencx [Online]. Available: https://www.scien.cx/2025/10/12/50-most-useful-vue-js-snippets/. [Accessed: ]
rf:citation
» 50 Most Useful Vue.js Snippets | Software Developer | Sciencx | https://www.scien.cx/2025/10/12/50-most-useful-vue-js-snippets/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts