Fix Missing Import in Vue

Missing Import Errors in Vue

Vue projects throw Failed to resolve component or X is not defined when components or modules aren't properly imported.

Component Registration

<!-- BAD — component not imported -->
<template>
  <UserCard :user="user" />
</template>

<script setup>
// Missing import!
</script>

<!-- GOOD -->
<script setup>
import UserCard from '@/components/UserCard.vue';
</script>

Auto-Imports with unplugin-auto-import

Nuxt and some Vue projects use auto-imports:

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
    }),
  ],
});

With this, ref, computed, watch etc. don't need manual imports.

Composition API Imports

<script setup>
// These are needed without auto-import
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/stores/user';

const router = useRouter();
const userStore = useUserStore();
const { currentUser } = storeToRefs(userStore);
</script>

Path Aliases

// vite.config.ts
import { resolve } from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
});

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Bugsly captures Vue component resolution errors and module import failures in production, including the component tree context showing where the missing component was referenced.