Vue.js Power Tips: Level Up Your Frontend Development ⚡#

Global Event Bus Alternative#

While Vue 2’s event bus pattern is now discouraged, we can create a more type-safe communication system using a dedicated events service:

// events.js
import { ref, computed } from 'vue'

export const createEventsService = () => {
  const events = ref(new Map())
  
  const emit = (event, payload) => {
    if (!events.value.has(event)) return
    events.value.get(event).forEach(callback => callback(payload))
  }
  
  const on = (event, callback) => {
    if (!events.value.has(event)) {
      events.value.set(event, new Set())
    }
    events.value.get(event).add(callback)
    
    // Return unsubscribe function
    return () => {
      if (events.value.has(event)) {
        events.value.get(event).delete(callback)
      }
    }
  }
  
  return { emit, on }
}

// Create a singleton instance
export const eventsService = createEventsService()

This pattern gives you better control over event handling while maintaining loose coupling between components.

Pro Tip! 💡#

Always remember to clean up event listeners in onUnmounted() to prevent memory leaks:

import { onMounted, onUnmounted } from 'vue'
import { eventsService } from './events'

export default {
  setup() {
    let unsubscribe
    
    onMounted(() => {
      unsubscribe = eventsService.on('my-event', handleEvent)
    })
    
    onUnmounted(() => {
      unsubscribe && unsubscribe()
    })
    
    const handleEvent = (payload) => {
      console.log('Event received:', payload)
    }
    
    return { handleEvent }
  }
}

Custom Composables for Form Validation#

// useForm.js
import { ref, computed } from 'vue'

export function useForm(initialState, validations) {
  const formData = ref({...initialState})
  const errors = ref({})
  
  const validate = () => {
    const newErrors = {}
    let isValid = true
    
    Object.keys(validations).forEach(field => {
      const fieldValidators = validations[field]
      
      for (const validator of fieldValidators) {
        const { isValid: fieldIsValid, message } = validator(formData.value[field])
        
        if (!fieldIsValid) {
          if (!newErrors[field]) newErrors[field] = []
          newErrors[field].push(message)
          isValid = false
          break
        }
      }
    })
    
    errors.value = newErrors
    return isValid
  }
  
  const resetForm = () => {
    formData.value = {...initialState}
    errors.value = {}
  }
  
  const isValid = computed(() => Object.keys(errors.value).length === 0)
  
  return {
    formData,
    errors,
    validate,
    resetForm,
    isValid
  }
}

Usage in a component:

import { useForm } from '@/composables/useForm'

export default {
  setup() {
    const { formData, errors, validate, resetForm } = useForm(
      { email: '', password: '' },
      {
        email: [
          value => ({ 
            isValid: /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value), 
            message: 'Please enter a valid email address'
          })
        ],
        password: [
          value => ({ 
            isValid: value.length >= 8, 
            message: 'Password must be at least 8 characters'
          })
        ]
      }
    )
    
    const handleSubmit = () => {
      if (validate()) {
        // Submit the form
      }
    }
    
    return { formData, errors, handleSubmit, resetForm }
  }
}

State Machines for Complex UI Logic#

When managing complex component states, mini state machines can dramatically simplify your code:

import { ref, computed } from 'vue'

export function useStateMachine(initialState, transitions) {
  const currentState = ref(initialState)
  
  const can = (action) => {
    return transitions[currentState.value]?.includes(action)
  }
  
  const when = computed(() => {
    return Object.keys(transitions).reduce((acc, state) => {
      acc[state] = currentState.value === state
      return acc
    }, {})
  })
  
  const transition = (action) => {
    if (!can(action)) {
      console.warn(`Invalid transition: ${action} from state ${currentState.value}`)
      return false
    }
    
    currentState.value = action
    return true
  }
  
  return {
    state: currentState,
    can,
    when,
    transition
  }
}

Using it for a multi-step form:

const { state, when, transition } = useStateMachine('personalInfo', {
  'personalInfo': ['contactInfo', 'cancel'],
  'contactInfo': ['review', 'personalInfo', 'cancel'],
  'review': ['submit', 'contactInfo', 'cancel'],
  'submitting': ['success', 'error'],
  'success': [],
  'error': ['retry', 'cancel']
})

In your template:

<div v-if="when.personalInfo">
  <!-- Personal Info Form -->
  <button @click="transition('contactInfo')">Next</button>
</div>

<div v-else-if="when.contactInfo">
  <!-- Contact Info Form -->
  <button @click="transition('personalInfo')">Back</button>
  <button @click="transition('review')">Next</button>
</div>

<!-- ... and so on -->

Dynamic Component Loading#

Lazy-load components only when needed to improve initial load times:

import { defineAsyncComponent } from 'vue'

// In your component or router
const HeavyComponent = defineAsyncComponent(() => 
  import('./HeavyComponent.vue')
)

// With loading and error states
const ComplexChart = defineAsyncComponent({
  loader: () => import('./ComplexChart.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorDisplay,
  delay: 200,
  timeout: 10000
})

Component-Level Code Splitting#

Rather than creating a monolithic bundle, split functionality by routes:

// router/index.js
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    children: [
      {
        path: 'analytics',
        component: () => import('@/views/Analytics.vue')
      },
      {
        path: 'reports',
        component: () => import('@/views/Reports.vue')
      }
    ]
  }
]

Virtual Scrolling for Long Lists#

For extremely long lists, implement virtual scrolling for massive performance gains:

<template>
  <RecycleScroller
    class="scroller"
    :items="hugeDataset"
    :item-size="32"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="user-item">
      {{ item.name }}
    </div>
  </RecycleScroller>
</template>

<script setup>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

// Your data setup
</script>

Component Testing with Vitest and Vue Test Utils#

One testing approach that has saved me countless hours:

import { describe, it, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import UserProfile from './UserProfile.vue'

describe('UserProfile', () => {
  it('displays user information correctly', () => {
    const wrapper = mount(UserProfile, {
      props: {
        user: {
          name: 'Jane Doe',
          email: 'jane@example.com'
        }
      }
    })
    
    expect(wrapper.text()).toContain('Jane Doe')
    expect(wrapper.text()).toContain('jane@example.com')
  })
  
  it('emits update event when form is submitted', async () => {
    const wrapper = mount(UserProfile, {
      props: {
        user: {
          name: 'Jane Doe',
          email: 'jane@example.com'
        }
      }
    })
    
    // Find the input and update it
    const nameInput = wrapper.find('input[name="name"]')
    await nameInput.setValue('Jane Smith')
    
    // Submit the form
    await wrapper.find('form').trigger('submit')
    
    // Check for the emitted event
    expect(wrapper.emitted('update')).toBeTruthy()
    expect(wrapper.emitted('update')[0][0].name).toBe('Jane Smith')
  })
})

Testing Composables Directly#

Composables can be tested in isolation without mounting components:

import { describe, it, expect, beforeEach } from 'vitest'
import { useCounter } from './useCounter'

describe('useCounter', () => {
  let counter
  
  beforeEach(() => {
    counter = useCounter(0)
  })
  
  it('should increment the count', () => {
    expect(counter.count.value).toBe(0)
    counter.increment()
    expect(counter.count.value).toBe(1)
  })
  
  it('should decrement the count', () => {
    counter.increment()
    counter.increment()
    expect(counter.count.value).toBe(2)
    counter.decrement()
    expect(counter.count.value).toBe(1)
  })
})

Teleport for Modal Dialogs#

Creating accessible modals is now much easier:

<button @click="showModal = true">Open Modal</button>

<teleport to="body">
  <div v-if="showModal" class="modal">
    <div class="modal-content">
      <h2>Important Information</h2>
      <p>This modal is teleported to the body element!</p>
      <button @click="showModal = false">Close</button>
    </div>
  </div>
</teleport>

Multiple v-models for Complex Forms#

<CustomForm
  v-model:first-name="firstName"
  v-model:last-name="lastName"
  v-model:email="email"
/>

In the CustomForm component:

<template>
  <div>
    <input 
      :value="firstName"
      @input="$emit('update:first-name', $event.target.value)"
    />
    <input 
      :value="lastName"
      @input="$emit('update:last-name', $event.target.value)"
    />
    <input 
      :value="email"
      @input="$emit('update:email', $event.target.value)"
    />
  </div>
</template>

<script setup>
defineProps({
  firstName: String,
  lastName: String,
  email: String
})

defineEmits(['update:first-name', 'update:last-name', 'update:email'])
</script>

Suspense for Async Components#

Handle loading states more gracefully:

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div class="loading">Loading...</div>
  </template>
</Suspense>

Where AsyncComponent might look like:

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

const data = await fetch('/api/data').then(r => r.json())
const processedData = ref(data.map(item => /* process item */))
</script>

<template>
  <div>
    <!-- Render your data -->
    <div v-for="item in processedData" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

VS Code Extensions#

• Volar - Vue Language Features
• ESLint
• Prettier
• CodeSnap (for sharing code snippets)
• GitLens
• Vue VSCode Snippets

Vue CLI Configuration#

My vue.config.js for optimal development:

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@components': path.resolve(__dirname, 'src/components'),
        '@composables': path.resolve(__dirname, 'src/composables'),
        '@assets': path.resolve(__dirname, 'src/assets')
      }
    }
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/styles/_variables.scss";
          @import "@/styles/_mixins.scss";
        `
      }
    }
  },
  devServer: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true
      }
    }
  }
}

Project Structure That Scales#

src/
  ├── assets/
  ├── components/
  │   ├── common/
  │   │   ├── BaseButton.vue
  │   │   └── BaseInput.vue
  │   ├── layout/
  │   └── features/
  │       ├── UserDashboard/
  │       │   ├── UserStats.vue
  │       │   └── UserActivity.vue
  │       └── Settings/
  ├── composables/
  │   ├── useApi.js
  │   ├── useAuth.js
  │   └── useNotification.js
  ├── router/
  ├── stores/
  ├── styles/
  │   ├── _variables.scss
  │   └── _mixins.scss
  ├── utils/
  └── views/