Definitive Guide to Vue 3 Components

Introduction to Vue 3 Components

Vue 3 represents a significant evolution in the Vue.js framework, introducing the Composition API as a powerful alternative to the traditional Options API. Components serve as the fundamental building blocks of Vue applications, encapsulating reusable pieces of user interface with their own logic, styling, and markup.

This comprehensive guide walks you through everything you need to know about Vue 3 components, from foundational concepts to advanced patterns used in production applications. Whether you're building a simple widget or a complex enterprise application, understanding Vue 3's component system is essential for creating maintainable, scalable codebases. Our /services/web-development/ expertise helps organizations implement these patterns effectively.

What You'll Learn

• The fundamentals of Vue 3 component architecture
• How to leverage the Composition API for better code organization
• Mastering reactivity with ref() and reactive()
• Effective use of props, events, and slots
• Building reusable logic with composables
• Performance optimization techniques
• Common component patterns and best practices

Setting Up a Vue 3 Project

Before diving into components, you need a properly configured Vue 3 development environment. Vite has become the standard build tool for Vue projects due to its exceptional performance and modern approach to development. Our team specializes in setting up optimal development workflows as part of our /services/web-development/ services.

Creating a New Project

The recommended way to scaffold a new Vue 3 project is using Vite's create command. This sets up a development server with hot module replacement (HMR), optimized builds, and seamless TypeScript integration.

# Create a new Vue 3 project
npm create vite@latest my-vue-app -- --template vue

# Navigate to the project directory
cd my-vue-app

# Install dependencies
npm install

# Start the development server
npm run dev

The development server typically starts at http://localhost:5173 and provides instant feedback as you make changes to your code.

Project Structure Overview

A standard Vue 3 project organized with Composition API follows a clear structure that promotes maintainability and scalability. The src directory contains your application source code, with components typically residing in dedicated folders for better organization as your application grows.

The src/components folder holds reusable UI components like buttons, inputs, and cards. These should be generic enough to use across multiple views. The src/composables folder contains reusable logic functions following the use naming convention, such as useAuth for authentication or useFetch for data fetching. The src/views or src/pages folder contains route-level components representing different pages of your application. The root component App.vue serves as the entry point where components are assembled.

As your application grows, consider adding additional folders like src/utils for helper functions, src/stores for Pinia state management, and src/types for TypeScript definitions. Following the Vue.js official documentation recommendations for project organization helps maintain consistency across your codebase.

Component Anatomy: Options API vs Composition API

Vue 3 provides two approaches to defining components: the traditional Options API and the newer Composition API. Understanding both approaches helps you make informed decisions about your component architecture.

The Options API

The Options API organizes component logic by discrete options such as data, methods, computed properties, and lifecycle hooks. This approach has been the foundation of Vue since its inception and remains fully supported in Vue 3.

<script>
export default {
 data() {
 return {
 count: 0,
 message: 'Hello Vue!'
 }
 },
 computed: {
 doubled() {
 return this.count * 2
 }
 },
 methods: {
 increment() {
 this.count++
 }
 },
 mounted() {
 console.log('Component mounted')
 }
}
</script>

<template>
 <div>
 <p>{{ message }} - Count: {{ count }}</p>
 <p>Doubled: {{ doubled }}</p>
 <button @click="increment">Increment</button>
 </div>
</template>

The Composition API

The Composition API introduces a more flexible way to organize component logic using setup() or <script setup>. This approach groups related functionality together regardless of what type of option it represents.

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

// Reactive state
const count = ref(0)
const message = ref('Hello Vue!')

// Computed property
const doubled = computed(() => count.value * 2)

// Method
function increment() {
 count.value++
}

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

<template>
 <div>
 <p>{{ message }} - Count: {{ count }}</p>
 <p>Doubled: {{ doubled }}</p>
 <button @click="increment">Increment</button>
 </div>
</template>

Key Differences

The Composition API offers several advantages over the Options API that make it the recommended approach for new projects. First, logic organization improves significantly because related functionality stays together rather than being scattered across different option types. Second, TypeScript support becomes much stronger since the Djamware Composition API guide demonstrates how type inference works naturally with function-based definitions. Third, code reuse becomes easier through composables, which encapsulate and share reactive logic across components.

However, the Options API remains fully supported and may be preferable in certain scenarios. For smaller components with simple logic, the Options API can be more readable for developers unfamiliar with the Composition API. Teams migrating from Vue 2 may find the Options API easier to adopt initially. Legacy projects with extensive Options API codebases don't require immediate migration.

The <script setup> syntax, which provides compile-time optimizations and reduces boilerplate, is the recommended way to use the Composition API for all new development according to the MDN Web Docs Vue.js guide.

Reactivity Fundamentals

Vue 3's reactivity system forms the foundation of how components respond to data changes. Understanding the distinction between ref() and reactive(), and when to use each, is crucial for building effective components.

Using ref() for Primitive Values

The ref() function creates a reactive reference to a primitive value such as numbers, strings, booleans, or objects. The returned object contains a .value property that holds the actual value.

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

// Create reactive primitives
const count = ref(0)
const name = ref('Vue 3')
const isActive = ref(true)

// Access and modify through .value
function increment() {
 count.value++
}

// In templates, .value is automatically unwrapped
</script>

<template>
 <div>
 <p>Count: {{ count }}</p>
 <p>Name: {{ name }}</p>
 <button @click="increment">Increment</button>
 </div>
</template>

Using reactive() for Objects

The reactive() function creates a reactive proxy for an object or array. Unlike ref(), you access properties directly without .value.

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

// Create reactive object
const state = reactive({
 user: {
 name: 'John',
 email: '[email protected]'
 },
 settings: {
 theme: 'dark',
 notifications: true
 }
})

// Access properties directly
function updateTheme() {
 state.settings.theme = 'light'
}
</script>

<template>
 <div>
 <p>User: {{ state.user.name }}</p>
 <p>Theme: {{ state.settings.theme }}</p>
 </div>
</template>

ref vs reactive: When to Use Each

Best Practices for Choosing Between ref and reactive

Choosing between ref() and reactive() depends on your specific use case, and following these guidelines helps prevent common pitfalls. Use ref() for primitive values including numbers, strings, booleans, and when you need to replace the entire reactive value. Use reactive() for objects where you'll be mutating existing properties rather than replacing the entire object. The Vue.js official documentation recommends ref() as the more versatile choice since it works with any type.

A common pitfall is destructuring reactive objects, which breaks reactivity. When you need to use individual properties from a reactive object, use toRefs() to maintain the reactive connection. Another consideration is type inference: ref() provides clearer TypeScript inference, especially for complex types, while reactive() requires more explicit type annotations.

For better organization in complex components, consider grouping related reactive state using reactive() while keeping independent values in ref(). This approach aligns with the Djamware Composition API comprehensive guide recommendation to group related state logically. Implementing proper reactivity patterns is essential for building maintainable applications, which is why our /services/web-development/ team emphasizes these fundamentals in every project.

Computed Properties and Watchers

Computed properties and watchers are essential tools for responding to reactive state changes. They serve different purposes and understanding when to use each is key to writing efficient Vue components.

Computed Properties

Computed properties automatically update when their dependencies change. They're cached based on their dependencies, meaning they only recalculate when necessary.

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

const firstName = ref('John')
const lastName = ref('Doe')

// Computed property for full name
const fullName = computed(() => {
 return `${firstName.value} ${lastName.value}`
})

// Computed with setter
const email = computed({
 get() {
 return `${firstName.value.toLowerCase()}@example.com`
 },
 set(value) {
 // Handle email updates
 console.log('Email set to:', value)
 }
})
</script>

<template>
 <div>
 <p>Full Name: {{ fullName }}</p>
 <p>Email: {{ email }}</p>
 </div>
</template>

Watchers

Watchers execute side effects in response to reactive data changes. They're ideal for operations like API calls, data fetching, or complex transformations.

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

const searchQuery = ref('')
const searchResults = ref([])

// Watch a single value
watch(searchQuery, async (newQuery, oldQuery) => {
 if (newQuery.length > 2) {
 searchResults.value = await fetchResults(newQuery)
 } else {
 searchResults.value = []
 }
}, {
 debounce: 300,
 immediate: true
})

async function fetchResults(query) {
 // Simulated API call
 return []
}
</script>

watchEffect() for Automatic Tracking

The watchEffect() function automatically tracks all reactive dependencies used within its callback, running immediately and re-running whenever any dependency changes.

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

const count = ref(0)
const message = ref('')

// Automatically tracks count.value
watchEffect(() => {
 message.value = `Count is now: ${count.value}`
})
</script>

When to Use Each Approach

Use computed() when you need to derive a value from reactive state that serves as display data or input for other calculations. Computed properties are cached, so they're efficient for expensive calculations that shouldn't run on every render.

Use watch() when you need to perform side effects in response to specific data changes, particularly when you want control over when the effect runs and access to both old and new values. Watchers are ideal for API calls, data synchronization, and operations that require the previous value.

Use watchEffect() when you want automatic dependency tracking and need the effect to run immediately. This is useful for logging, tracking, or when all reactive dependencies should trigger the effect without explicit specification. As demonstrated in the Djamware Composition API tutorial, watchEffect() simplifies code when all dependencies should trigger re-execution.

Lifecycle Hooks in Composition API

Vue 3 provides composition-style lifecycle hooks that integrate seamlessly with the Composition API. These hooks replace the options-based hooks from Vue 2 while providing the same functionality.

Common Lifecycle Hooks

<script setup>
import { 
 onBeforeMount,
 onMounted,
 onBeforeUpdate,
 onUpdated,
 onBeforeUnmount,
 onUnmounted,
 onErrorCaptured
} from 'vue'

// Before the component is mounted to the DOM
onBeforeMount(() => {
 console.log('Component before mount')
})

// After the component is mounted
onMounted(() => {
 console.log('Component mounted')
 // Perfect for API calls, DOM access
 const element = document.querySelector('.my-element')
})

// Before a re-render when data changes
onBeforeUpdate(() => {
 console.log('Component about to update')
})

// After the DOM has been updated
onUpdated(() => {
 console.log('Component updated')
})

// Before the component is unmounted
onBeforeUnmount(() => {
 console.log('Component before unmount')
})

// After the component is unmounted
onUnmounted(() => {
 console.log('Component unmounted')
 // Clean up subscriptions, intervals, event listeners
})

// When an error is thrown in the component
onErrorCaptured((err) => {
 console.error('Error captured:', err)
})
</script>

Lifecycle Hooks Reference

Practical Example: Data Fetching

Here's a practical example of data fetching with lifecycle hooks, including loading states and error handling. This pattern is common in real-world applications.

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

const user = ref(null)
const loading = ref(false)
const error = ref(null)
let abortController = null

async function fetchUser(userId) {
 loading.value = true
 error.value = null
 
 try {
 abortController = new AbortController()
 const response = await fetch(`/api/users/${userId}`, {
 signal: abortController.signal
 })
 
 if (!response.ok) throw new Error('Failed to fetch user')
 
 user.value = await response.json()
 } catch (err) {
 if (err.name !== 'AbortError') {
 error.value = err.message
 }
 } finally {
 loading.value = false
 }
}

onMounted(() => {
 fetchUser(1)
})

onUnmounted(() => {
 // Clean up pending requests
 if (abortController) {
 abortController.abort()
 }
})
</script>

<template>
 <div>
 <div v-if="loading">Loading...</div>
 <div v-else-if="error" class="error">{{ error }}</div>
 <div v-else-if="user">
 <h2>{{ user.name }}</h2>
 <p>{{ user.email }}</p>
 </div>
 </div>
</template>

This example demonstrates several important patterns. First, the loading state provides feedback to users during async operations. Second, proper error handling captures and displays errors gracefully. Third, the abort controller ensures pending requests are cancelled when the component unmounts, preventing memory leaks and unnecessary network activity.

Props and Events: Component Communication

Components communicate through a parent-child relationship using props for downward data flow and events for upward communication. This pattern ensures predictable data flow and makes components easier to understand and test.

Defining Props

In the Composition API, props are defined using the defineProps() macro, which is automatically available in <script setup> components. TypeScript provides full type inference for prop definitions.

<!-- ChildComponent.vue -->
<script setup>
// Define props with type inference
defineProps({
 title: {
 type: String,
 required: true
 },
 count: {
 type: Number,
 default: 0
 },
 items: {
 type: Array,
 default: () => []
 }
})

// Or with TypeScript syntax (recommended)
// interface Props {
// title: string
// count?: number
// items?: string[]
// }
// defineProps<Props>()
</script>

<template>
 <div class="child-component">
 <h2>{{ title }}</h2>
 <p>Count: {{ count }}</p>
 <ul>
 <li v-for="item in items" :key="item">{{ item }}</li>
 </ul>
 </div>
</template>

Emitting Events

Child components communicate back to parents through emitted events using defineEmits(). Events can carry data payloads for more complex communication.

<!-- ChildComponent.vue -->
<script setup>
const emit = defineEmits(['update', 'delete'])

// Emit with payload
function updateValue(value) {
 emit('update', value)
}

// Emit without payload
function handleDelete() {
 emit('delete')
}
</script>

<template>
 <button @click="handleDelete">Delete</button>
</template>

Using Props and Events Together

<!-- ParentComponent.vue -->
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const message = ref('Hello from parent')
const count = ref(5)

function handleUpdate(newValue) {
 console.log('Child updated:', newValue)
}
</script>

<template>
 <ChildComponent 
 :title="message"
 :count="count"
 @update="handleUpdate"
 />
</template>

Best Practices for Props and Events

Following best practices for props and events ensures your components remain maintainable and predictable. Always use explicit prop types and validation for better developer experience and runtime safety. Required props should be clearly marked, and default values should be provided for optional props. Custom validators allow you to enforce complex rules that static typing cannot capture.

For event naming, use kebab-case in templates as Vue handles the conversion to camelCase in the component. Event names should describe what happened rather than what the parent should do. For example, use item-deleted instead of on-delete. Including payloads with events provides more context without requiring the parent to have access to the child's internal state.

The MDN Web Docs Vue.js framework comparison emphasizes that this unidirectional data flow makes debugging easier since data changes can be traced to their source. Avoid mutating props directly in child components, as this violates the one-way data flow principle and can cause unexpected behavior. Our /services/web-development/ team implements these patterns consistently across all projects for maintainable component architectures.

Slots: Flexible Component Content Distribution

Slots provide a powerful mechanism for creating flexible, reusable components that can accept dynamic content from their parents. This pattern is essential for building components like modals, cards, and layout wrappers.

Basic Slots

A slot acts as a placeholder where parent components can inject content. The default slot receives any content passed between the component's opening and closing tags.

<!-- ButtonComponent.vue -->
<template>
 <button class="btn">
 <slot>Default Text</slot>
 </button>
</template>

<!-- Usage -->
<ButtonComponent>
 Click Me
</ButtonComponent>

Named Slots

Named slots allow components to accept multiple content blocks in different positions. This is particularly useful for components with header, body, and footer sections.

<!-- CardComponent.vue -->
<template>
 <div class="card">
 <header class="card-header">
 <slot name="header">Default Header</slot>
 </header>
 <main class="card-body">
 <slot>Default Body</slot>
 </main>
 <footer class="card-footer">
 <slot name="footer"></slot>
 </footer>
 </div>
</template>

<!-- Usage with named slots -->
<CardComponent>
 <template #header>Card Title</template>
 <template #default>Card content goes here</template>
 <template #footer>Card actions</template>
</CardComponent>

Scoped Slots

Scoped slots allow child components to expose data to the parent's slot content. This enables powerful patterns like render functions and data transformation.

<!-- ListComponent.vue -->
<script setup>
import { ref } from 'vue'

const items = ref(['Item 1', 'Item 2', 'Item 3'])
</script>

<template>
 <ul>
 <li v-for="item in items" :key="item">
 <!-- Expose item to parent via slot props -->
 <slot :item="item" :index="items.indexOf(item)">
 {{ item }}
 </slot>
 </li>
 </ul>
</template>

<!-- Usage with scoped slot -->
<ListComponent>
 <template #default="{ item, index }">
 <span class="item-{{ index }}">{{ item.toUpperCase() }}</span>
 </template>
</ListComponent>

Practical Scoped Slot Patterns

Scoped slots are particularly powerful for data tables, form components, and any situation where you want to give parents control over how data is rendered. A common pattern is the data table component that exposes row data for custom rendering.

<!-- DataTable.vue -->
<script setup>
import { ref } from 'vue'

const props = defineProps({
 columns: Array,
 data: Array
})

const emit = defineEmits(['row-click'])
</script>

<template>
 <table>
 <thead>
 <tr>
 <th v-for="col in columns" :key="col.key">{{ col.label }}</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="(row, index) in data" :key="index" @click="emit('row-click', row)">
 <td v-for="col in columns" :key="col.key">
 <slot :name="'cell-' + col.key" :row="row" :value="row[col.key]">
 {{ row[col.key] }}
 </slot>
 </td>
 </tr>
 </tbody>
 </table>
</template>

<!-- Usage with custom cell rendering -->
<DataTable :columns="columns" :data="users">
 <template #cell-name="{ value, row }">
 <strong>{{ value }}</strong>
 </template>
 <template #cell-actions="{ row }">
 <button @click="edit(row.id)">Edit</button>
 </template>
</DataTable>

This pattern allows complete flexibility in how each cell renders while keeping the table component generic and reusable. As highlighted in the Vue Mastery learning resources, scoped slots represent one of Vue's most powerful features for building flexible component APIs.

Composables: Reusable Logic

Composables are the Composition API's answer to logic reuse. They are functions that encapsulate and share reactive state and logic across multiple components. This pattern is similar to React Hooks but follows Vue's reactivity model.

Creating a Basic Composable

A composable is simply a function that uses Vue's Composition API functions to encapsulate and return reactive state and methods.

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

export function useCounter(initialValue = 0) {
 const count = ref(initialValue)
 
 const increment = () => {
 count.value++
 }
 
 const decrement = () => {
 count.value--
 }
 
 const reset = () => {
 count.value = initialValue
 }
 
 return {
 count,
 increment,
 decrement,
 reset
 }
}

Using a Composable in Components

<script setup>
import { useCounter } from '@/composables/useCounter'

// Use the composable
const { count, increment, decrement, reset } = useCounter(10)
</script>

<template>
 <div>
 <p>Count: {{ count }}</p>
 <button @click="increment">+</button>
 <button @click="decrement">-</button>
 <button @click="reset">Reset</button>
 </div>
</template>

Advanced Composable: useFetch

// composables/useFetch.js
import { ref } from 'vue'

export function useFetch(url) {
 const data = ref(null)
 const error = ref(null)
 const loading = ref(false)
 
 async function fetchData() {
 loading.value = true
 error.value = null
 
 try {
 const response = await fetch(url)
 data.value = await response.json()
 } catch (err) {
 error.value = err.message
 } finally {
 loading.value = false
 }
 }
 
 // Fetch immediately
 fetchData()
 
 return {
 data,
 error,
 loading,
 refetch: fetchData
 }
}

Common Composable Patterns

Several composable patterns appear frequently in production Vue applications. The useAuth composable manages authentication state, providing login, logout, and user information. The useForm composable handles form state, validation, and submission with reusable logic. The useLocalStorage composable syncs reactive state with browser local storage for persistence. The useDarkMode composable manages theme switching with system preference detection.

// composables/useLocalStorage.js
import { ref, watch } from 'vue'

export function useLocalStorage(key, defaultValue) {
 const storedValue = localStorage.getItem(key)
 const data = ref(storedValue ? JSON.parse(storedValue) : defaultValue)
 
 watch(data, (newValue) => {
 localStorage.setItem(key, JSON.stringify(newValue))
 }, { deep: true })
 
 return data
}

// composables/useWindowSize.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useWindowSize() {
 const width = ref(window.innerWidth)
 const height = ref(window.innerHeight)
 
 function handleResize() {
 width.value = window.innerWidth
 height.value = window.innerHeight
 }
 
 onMounted(() => {
 window.addEventListener('resize', handleResize)
 })
 
 onUnmounted(() => {
 window.removeEventListener('resize', handleResize)
 })
 
 return { width, height }
}

The composable pattern, as demonstrated in the Djamware comprehensive Vue 3 guide, enables excellent code organization by extracting cross-cutting concerns into reusable functions. This approach keeps components focused on their specific UI responsibilities. Organizations implementing composables effectively often see improved maintainability, which is a key focus of our /services/web-development/ services.

Component Patterns and Best Practices

Building maintainable Vue 3 applications requires following established patterns and conventions. These patterns help teams collaborate effectively and create components that are easy to understand, test, and extend.

Single-File Component Structure

Organize your <script setup> content in a consistent order to improve readability and maintainability.

<script setup>
// 1. Imports (Vue, other modules, composables, components)
import { ref, computed } from 'vue'
import { useAuth } from '@/composables/useAuth'
import BaseButton from '@/components/BaseButton.vue'

// 2. Component definitions (if not auto-imported)
// defineProps, defineEmits, defineExpose

// 3. Reactive state
const isLoading = ref(false)

// 4. Computed properties
const isValid = computed(() => {})

// 5. Watchers

// 6. Lifecycle hooks

// 7. Methods
function handleSubmit() {}
</script>

<template>
 <!-- Template content -->
</template>

<style scoped>
/* Scoped styles */
</style>

Composition Function Naming Convention

Follow the use prefix convention for composables to make them easily recognizable and discoverable.

• useAuth() - Authentication logic
• useFetch() - Data fetching
• useForm() - Form handling
• useLocalStorage() - Local storage sync
• useWindowSize() - Window dimensions

Directory Structure

src/
├── components/
│ ├── BaseButton.vue
│ ├── BaseInput.vue
│ └── MyComponent.vue
├── composables/
│ ├── useAuth.js
│ ├── useFetch.js
│ └── useForm.js
├── views/
│ ├── HomeView.vue
│ └── AboutView.vue
└── App.vue

Performance Optimization

Vue 3 provides several techniques for optimizing component performance in production applications.

Async Components with defineAsyncComponent allow you to load components on demand, reducing initial bundle size and improving load times.

import { defineAsyncComponent } from 'vue'

const HeavyComponent = defineAsyncComponent(() =>
 import('./components/HeavyComponent.vue')
)

Lazy Loading with Vue Router loads page components only when their routes are accessed, keeping initial bundle size minimal.

const routes = [
 {
 path: '/dashboard',
 component: () => import('./views/DashboardView.vue')
 }
]

v-memo for Template Memoization caches template parts that don't need to re-render, reducing unnecessary DOM operations.

<div v-memo="[userId === currentUser.id]">
 <!-- Only re-renders when userId changes -->
</div>

keep-alive for Component Caching preserves component state when switching between components without destroying them.

<router-view v-slot="{ Component }">
 <keep-alive>
 <component :is="Component" />
 </keep-alive>
</router-view>

These optimization techniques, as recommended in the Vue.js official performance guide, should be applied judiciously based on profiling and actual performance needs. Performance optimization is a critical aspect of professional /services/web-development/ that ensures applications remain responsive as they scale.

TypeScript Integration

Vue 3 provides first-class TypeScript support, enabling full type inference for props, emits, and component APIs. Using TypeScript with Vue 3 significantly improves developer experience and reduces runtime errors.

Type-Safe Props

<script setup lang="ts">
interface User {
 id: number
 name: string
 email: string
}

interface Props {
 title: string
 user: User
 items?: string[]
 count?: number
}

defineProps<Props>()
</script>

Type-Safe Emits

<script setup lang="ts">
interface Emits {
 (e: 'update', value: string): void
 (e: 'delete', id: number): void
 (e: 'change', payload: { key: string; value: unknown }): void
}

const emit = defineEmits<Emits>()
</script>

Generic Components

Vue 3 supports generic components using the <script setup lang="ts" generic="T"> syntax, enabling type-safe component APIs for data-driven components.

<script setup lang="ts" generic="T extends { id: number }">
import { computed } from 'vue'

interface Props {
 items: T[]
 selectedId?: number
}

const props = defineProps<Props>()

const selectedItems = computed(() => 
 props.items.filter(item => item.id === props.selectedId)
)
</script>

Type-Safe Composables

Composables can also benefit from TypeScript type inference, making their APIs clear and type-safe.

// composables/useCounter.ts
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
 const count = ref(initialValue)
 
 const increment = () => {
 count.value++
 }
 
 const doubled = computed(() => count.value * 2)
 
 return {
 count: readonly(count),
 increment,
 doubled
 }
}

Vue 3's TypeScript integration, as documented in the MDN Web Docs Vue.js framework guide, provides excellent developer experience with IDE support for autocompletion, type checking, and refactoring across your component codebase. Strong TypeScript integration is a hallmark of quality /services/web-development/ practices that reduce bugs and improve maintainability.

Conclusion

Vue 3's component system represents a significant advancement in frontend development, providing developers with powerful tools for building scalable, maintainable applications. The Composition API, with its emphasis on logic composition and reuse, addresses many of the challenges faced in larger codebases.

Key takeaways from this guide:

• Start with the fundamentals: Understanding reactivity, props, and events provides the foundation for all Vue development
• Embrace the Composition API: It offers better organization, TypeScript support, and logic reuse
• Build composables: Extract and share reusable logic across your application
• Follow conventions: Consistent naming and structure make collaboration easier
• Optimize for performance: Use async components, lazy loading, and other techniques when needed

As you continue your Vue 3 journey, remember that the best component architecture is one that serves your application's needs while remaining maintainable and understandable. Start simple, refactor as needed, and let Vue's reactivity system handle the complex synchronization between state and UI.

Next Steps

• Explore Vue Router for SPA navigation
• Learn Pinia for state management
• Build a complete application using these patterns
• Contribute to the Vue ecosystem

For organizations building complex Vue applications, our web development services can help architect scalable component systems and implement best practices across your codebase. Additionally, our AI automation services can help you integrate intelligent features into your Vue applications for enhanced user experiences.

Sources

1. Vue.js Official Documentation
2. Vue Mastery - Vue 3 Fundamentals
3. Djamware: Mastering Vue 3 Composition API
4. MDN Web Docs: Vue.js Getting Started