Vue Composition API Support and Integration Utilities Compared

Understanding the evolution of Composition API support is critical when managing Vue ecosystems. @vue/composition-api and @nuxtjs/composition-api were essential tools during the Vue 2 era, while @vueuse/integrations represents the modern standard for utilities in Vue 3 and Vue 2.7+. Let's break down how they differ in setup, usage, and long-term viability.

🛠️ Core Purpose & Version Support

@vue/composition-api brings Composition API to Vue 2 versions prior to 2.7.

• It acts as a plugin to polyfill setup, ref, reactive, and other APIs.
• Required for Vue 2.0 – 2.6.

// @vue/composition-api: Plugin installation
import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';

Vue.use(VueCompositionAPI);

@nuxtjs/composition-api extends Composition API support specifically for Nuxt 2.

• It wraps Nuxt 2 context (store, route, params) for use in setup.
• Required for Nuxt 2 projects using Composition API syntax.

// @nuxtjs/composition-api: Nuxt module config
// nuxt.config.js
export default {
  buildModules: ['@nuxtjs/composition-api/module']
}

@vueuse/integrations provides utilities for Vue 2.7+ and Vue 3.

• It assumes Composition API is already available (native or polyfilled).
• Focuses on third-party library wrappers, not core API support.

// @vueuse/integrations: Direct import
import { useAxios } from '@vueuse/integrations/useAxios';
import axios from 'axios';

⚙️ Setup & Configuration

@vue/composition-api requires manual plugin registration.

• You must install it before creating the Vue instance.
• Failing to register it causes runtime errors when using setup.

// @vue/composition-api: Main entry
import Vue from 'vue';
import App from './App.vue';
import VueCompositionAPI from '@vue/composition-api';

Vue.use(VueCompositionAPI);
new Vue({ render: h => h(App) }).$mount('#app');

@nuxtjs/composition-api uses Nuxt's module system.

• Add it to buildModules in your config file.
• Automatically handles server-side rendering compatibility.

// @nuxtjs/composition-api: Component usage
export default defineComponent({
  setup() {
    const { app } = useContext();
    // Access Nuxt context safely
  }
})

@vueuse/integrations requires no global setup.

• Import specific functions where needed.
• Works tree-shakably with bundlers like Vite or Webpack.

// @vueuse/integrations: Composable usage
export default {
  setup() {
    const { data, loading } = useAxios('/api/users');
    return { data, loading };
  }
}

🔄 Accessing Context & State

@vue/composition-api relies on standard Vue 2 instance properties.

• You access data via this in Options API or setup return.
• No built-in helpers for router or store without extra plugins.

// @vue/composition-api: Standard setup
export default {
  setup() {
    const count = ref(0);
    return { count };
  }
}

@nuxtjs/composition-api provides specific hooks for Nuxt context.

• useContext, useStore, and useRoute abstract Nuxt 2 internals.
• Essential for accessing server-side data in setup.

// @nuxtjs/composition-api: Nuxt context
export default defineComponent({
  setup() {
    const { store } = useContext();
    const user = computed(() => store.state.user);
    return { user };
  }
})

@vueuse/integrations focuses on external service state.

• Manages state for libraries like Axios, Focus Trap, or Cookies.
• Does not manage framework context directly.

// @vueuse/integrations: External state
export default {
  setup() {
    const { data, isFinished } = useAxios('https://api.example.com/data');
    return { data, isFinished };
  }
}

⚠️ Deprecation & Migration Path

@vue/composition-api is legacy for Vue 2 < 2.7.

• Vue 2.7+ includes Composition API natively.
• Vue 3 has it built-in by default.
• Do not use in new projects. Migrate to Vue 3 or Vue 2.7.

// Migration: Vue 2.7+ or Vue 3 (No plugin needed)
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    return { count };
  }
}

@nuxtjs/composition-api is legacy for Nuxt 2.

• Nuxt 3 uses Vue 3 native Composition API.
• Nuxt 2 is in maintenance mode only.
• Do not use for new applications. Plan migration to Nuxt 3.

// Migration: Nuxt 3 (Native support)
// components/Example.vue
<script setup>
const { $store } = useNuxtApp();
const user = computed(() => $store.state.user);
</script>

@vueuse/integrations is actively maintained.

• Regular updates for Vue 3 and Vue 2.7 compatibility.
• Safe for long-term use in modern stacks.
• Recommended for all new Vue projects needing integrations.

// Modern Standard: VueUse Integrations
import { useAxios } from '@vueuse/integrations';

export default {
  setup() {
    const { data } = useAxios('/api/data');
    return { data };
  }
}

📊 Summary: Key Differences

💡 The Big Picture

@vue/composition-api and @nuxtjs/composition-api were vital during the transition from Vue 2 Options API to Composition API. They allowed teams to adopt modern patterns before the core framework supported them. However, with Vue 2 reaching End of Life and Nuxt 3 stabilizing, these packages are now legacy tools. Use them only to keep existing systems running while you plan a migration.

@vueuse/integrations is the forward-looking choice. It assumes you are on a supported Vue version and helps you connect your app to the wider ecosystem without reinventing the wheel. It reduces boilerplate for common tasks like HTTP requests, focus management, and authentication.

Final Thought: If you are starting fresh, build on Vue 3 or Vue 2.7+ with @vueuse/integrations. Reserve the older packages strictly for maintaining existing Vue 2 or Nuxt 2 codebases until migration is complete.