Organizational logic centrally manages related logic according to function rather than option type; 2. Create custom composables starting with use to encapsulate reusable responsive logic to improve consistency and maintenance; 3. Use composables to combine ref or Pinia to manage global state, use ref for small projects, and use Pinia to implement modular state management; 4. Use <script setup> syntax to reduce template code, improve readability and development efficiency; finally, by extracting logic and reusing composables to achieve a scalable, easy to test, and easy to maintain Vue 3 application architecture, which is recommended for building medium and large projects.

Vue 3's Composition API is a game-changer for building scalable, maintained applications. It shifts the way we organize logic in components—from the Options API's rigid structure to a more flexible, function-based approach that groups code by feature rather than by option type (like data , methods , computed ). This makes it easier to reason about, reuse, and test complex logic.

Here's how to use the Composition API effectively to build scalable Vue 3 apps.

1. Organize Logic by Feature, Not Option Type

In the Options API, related logic is often split across data , methods , and computed . With the Composition API, you can keep all logic for a specific feature together.

Example: User Authentication Logic

 //composables/useAuth.js
import { ref, calculated } from 'vue'

export function useAuth() {
  const user = ref(null)
  const isLoggedIn = computed(() => !!user.value)

  function login(userData) {
    user.value = userData
  }

  function logout() {
    user.value = null
  }

  return {
    user,
    isLoggedIn,
    login,
    Logout
  }
}

Now in any component:

 // components/UserPanel.vue
import { useAuth } from '@/composables/useAuth'

export default {
  setup() {
    const { user, isLoggedIn, login, logout } = useAuth()

    return {
      user,
      isLoggedIn,
      login,
      Logout
    }
  }
}

This pattern makes it easy to reuse auth logic across components and keeps everything related to authentication in one place.

2. Use Custom Composables for Reusability

Custom components are the heart of scalable Vue apps. They encapsulate reactive logic and can be shared across components or even projects.

Tips for Writing Good Composables:

• Name them with the use prefix (eg, useFetch , useLocalStorage )
• Return a plain object with refs, computed properties, and functions
• Accept parameters for flexibility
• Handle side effects (like API calls) internally

Example: useFetch composable

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

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  async function fetchData() {
    loading.value = true
    try {
      const res = await fetch(url)
      if (!res.ok) throw new Error(res.statusText)
      data.value = await res.json()
    } catch (err) {
      error.value = err.message
    } finally {
      loading.value = false
    }
  }

  onMounted(fetchData)

  return { data, error, loading, refetch: fetchData }
}

Now use it anywhere:

 setup() {
  const { data, loading } = useFetch('/api/users')
  return { users: data, loading }
}

This reduces boilerplate and promotes consistency.

3. Manage Global State with Composables Refs or Pinia

For small to medium apps, you can use a reactive object or ref inside a composable to share state globally.

 // stores/userStore.js
import { ref, calculated } from 'vue'

const user = ref(null)

export function useUserStore() {
  const isLoggedIn = computed(() => !!user.value)

  function setUser(userData) {
    user.value = userData
  }

  function clearUser() {
    user.value = null
  }

  return {
    user,
    isLoggedIn,
    setUser,
    clearUser
  }
}

For larger apps, pair the Composition API with Pinia , Vue's official state management library, which fully supports Composition-style stores.

Pinia Example:

 // stores/auth.js
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useAuthStore = defineStore('auth', () => {
  const user = ref(null)

  function login(userData) {
    user.value = userData
  }

  function logout() {
    user.value = null
  }

  return { user, login, logout }
})

Then in components:

 import { useAuthStore } from '@/stores/auth'

setup() {
  const auth = useAuthStore()
  return { auth }
}

This scales well with devtools support, hydration, and modular design.

4. Leverage Script Setup Syntax for Cleaner Code

The <script setup> syntax reduces boilerplate and improves readingability.

 <script setup>
import { ref, onMounted } from &#39;vue&#39;
import { useFetch } from &#39;@/composables/useFetch&#39;

const { data: posts, loading } = useFetch(&#39;/api/posts&#39;)
</script>

<template>
  <div v-if="loading">Loading...</div>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

No need to manually return values from setup() —everything in <script setup> is automatically available in the template.

Final Thoughts

The Composition API isn't just about writing better components—it's about building a scalable architecture:

• Extract logic into composables
• Reuse across components
• Test more easily
• Scale without chaos

Start small: convert one complex component to Composition API, extract one piece of logic into a composable, and grow from there.

Basically, if you're building anything beyond a toy app, the Composition API is the way to go.

The above is the detailed content of Vue 3 Composition API: A Guide to Building Scalable Applications. For more information, please follow other related articles on the PHP Chinese website!