# Auto-Imported Globals in the escrcpy Vue Frontend

> Discover auto-imported globals in escrcpy's Vue frontend. Learn how Vite's unplugin-auto-import simplifies Vue, Pinia, Vue Router, and VueUse imports, reducing boilerplate.

- Repository: [viarotel-org/escrcpy](https://github.com/viarotel-org/escrcpy)
- Tags: deep-dive
- Published: 2026-09-10

---

**The escrcpy Vue frontend automatically imports globals from Vue, Pinia, Vue Router, and VueUse via the `unplugin-auto-import` Vite plugin configured in [`desktop/src/plugins/internal.js`](https://github.com/viarotel-org/escrcpy/blob/main/desktop/src/plugins/internal.js), eliminating the need for repetitive import statements.**

The **escrcpy** project leverages modern Vite tooling to streamline Vue.js development in its desktop application. Through strategic configuration of **unplugin-auto-import**, the frontend eliminates boilerplate import statements while maintaining full access to essential framework APIs. This guide examines the specific **auto-imported globals in the Vue frontend**, their source configuration, and practical usage patterns drawn directly from the repository source.

## Configuration in [`desktop/src/plugins/internal.js`](https://github.com/viarotel-org/escrcpy/blob/main/desktop/src/plugins/internal.js)

The auto-import system centers on [`desktop/src/plugins/internal.js`](https://github.com/viarotel-org/escrcpy/blob/main/desktop/src/plugins/internal.js), where the `unplugin-auto-import` plugin registers specific libraries for global availability. This file exports a configuration object that Vite consumes, mapping module names to their named exports and integrating with `unplugin-vue-components` for UI element resolution.

### Plugin Architecture

The plugin configuration explicitly targets five major libraries. When the Vite build process runs, it scans source files and automatically injects import statements for any detected usage of configured globals.

## Available Auto-Imported Libraries

### Vue Core Reactivity and Lifecycle

From the `'vue'` package, the configuration exposes the complete Composition API surface. You can reference `ref`, `reactive`, `computed`, `watch`, and `watchEffect` without import statements. Lifecycle hooks including `onMounted`, `onUnmounted`, `onUpdated`, and `onBeforeMount` are globally available.

Component definition helpers like `defineComponent`, `defineAsyncComponent`, `defineEmits`, and `defineProps` are also auto-imported. The instance accessor `getCurrentInstance` completes the Vue core auto-imports defined in [`internal.js`](https://github.com/viarotel-org/escrcpy/blob/main/internal.js) lines 15-17.

### Pinia State Management

The `'pinia'` library exports are configured for global access, primarily `defineStore` for store creation and `storeToRefs` for reactive store decomposition. The `acceptHMRUpdate` utility for hot module replacement and `mapState`, `mapActions` helpers are available without explicit imports.

### Vue Router Navigation

Via the `'vue-router/unplugin'` entry, navigation composables `useRouter` and `useRoute` become globals. Route guards including `onBeforeRouteLeave` and `onBeforeRouteUpdate` are automatically imported, along with `createRouter` and `createWebHistory` for router instantiation.

### VueUse Utilities

The configuration imports all exports from `'@vueuse/core'`, making utilities like `useMouse`, `useFetch`, `useLocalStorage`, `useDark`, and `usePreferredLanguages` immediately accessible. This includes event listeners via `useEventListener` and network detection through `useOnline`.

### Element Plus Components

While `unplugin-auto-import` handles composables, **unplugin-vue-components** (referenced as `useAutoComponents` in the configuration) handles UI components. Element Plus components resolve automatically through the resolver defined in [`internal.js`](https://github.com/viarotel-org/escrcpy/blob/main/internal.js) lines 8-14, allowing templates to use `<el-button>` or `<el-dialog>` without component imports.

## Practical Usage Examples

In practice, Vue single-file components in `desktop/src/views/` omit import statements entirely:

```vue
<script setup>
// No imports needed - everything below is auto-imported

// Vue reactivity
const count = ref(0)
const doubled = computed(() => count.value * 2)

// Store access
const userStore = useUserStore()
const { name, email } = storeToRefs(userStore)

// Routing
const router = useRouter()
const route = useRoute()

// VueUse utilities
const { x, y } = useMouse()
const isDark = useDark()

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

<template>
  <!-- Element Plus component used without import -->
  <el-button @click="router.push('/profile')">
    Navigate (Mouse: {{ x }}, {{ y }})
  </el-button>
</template>

```

The [`vite.config.js`](https://github.com/viarotel-org/escrcpy/blob/main/vite.config.js) file integrates these plugins into the build pipeline, ensuring TypeScript support and proper IDE intellisense through generated declaration files.

## Summary

- **escrcpy** uses `unplugin-auto-import` configured in [`desktop/src/plugins/internal.js`](https://github.com/viarotel-org/escrcpy/blob/main/desktop/src/plugins/internal.js) to eliminate import boilerplate.
- Vue core APIs including `ref`, `computed`, and lifecycle hooks are globally available.
- Pinia's `defineStore` and `storeToRefs` require no import statements.
- Vue Router composables `useRouter` and `useRoute` are auto-imported.
- All VueUse utilities from `@vueuse/core` are accessible without imports.
- Element Plus components resolve automatically via `unplugin-vue-components`.

## Frequently Asked Questions

### What file configures the auto-imported globals in escrcpy?

The configuration resides in [`desktop/src/plugins/internal.js`](https://github.com/viarotel-org/escrcpy/blob/main/desktop/src/plugins/internal.js). This file exports the `unplugin-auto-import` configuration that registers Vue, Pinia, Vue Router, and VueUse for automatic global availability.

### Do I need to import `ref` or `computed` in escrcpy Vue components?

No. According to the source code in [`internal.js`](https://github.com/viarotel-org/escrcpy/blob/main/internal.js) lines 15-17, Vue's `ref`, `reactive`, `computed`, `watch`, and other Composition API functions are auto-imported globals. You can use them directly in `<script setup>` blocks without import statements.

### How are Element Plus components made available without imports?

Element Plus components resolve through `unplugin-vue-components` rather than `unplugin-auto-import`. The resolver configured in [`internal.js`](https://github.com/viarotel-org/escrcpy/blob/main/internal.js) lines 8-14 automatically registers Element Plus components as globals, allowing direct usage in templates like `<el-button>`.

### Does auto-importing affect TypeScript type checking in escrcpy?

No. The `unplugin-auto-import` plugin generates TypeScript declaration files as part of the build process. This provides full IDE intellisense and type safety for all auto-imported globals in the Vue frontend.