{"record":{"id":"dff44eb0d242f1cd","repo":"tailwindlabs/heroicons","slug":"you-re-trying-to-import-heroicons-vue-outline","errorCode":null,"errorMessage":"You're trying to import `@heroicons/vue/outline/${property}` from Heroicons v1 but have installed Heroicons v2. Install `@heroicons/vue@v1` to resolve this error.","messagePattern":"You're trying to import `@heroicons/vue/outline/(.+?)` from Heroicons v1 but have installed Heroicons v2\\. Install `@heroicons/vue@v1` to resolve this error\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"vue/outline/index.js","lineNumber":9,"sourceCode":"let proxy = new Proxy(\n  {},\n  {\n    get: (obj, property) => {\n      if (property === '__esModule') {\n        return {}\n      }\n\n      throw new Error(\n        `You\\'re trying to import \\`@heroicons/vue/outline/${property}\\` from Heroicons v1 but have installed Heroicons v2. Install \\`@heroicons/vue@v1\\` to resolve this error.`\n      )\n    },\n  }\n)\n\nmodule.exports = proxy\n","sourceCodeStart":1,"sourceCodeEnd":17,"githubUrl":"https://github.com/tailwindlabs/heroicons/blob/616b7a4dbbf3d011760af8066262cd5c6b3868f3/vue/outline/index.js#L1-L17","documentation":"In v2, `@heroicons/vue/outline` is a compatibility shim that throws, because v1 exposed icons as `@heroicons/vue/outline/<Icon>`. Reaching this error means v1-style outline imports are still present while heroicons v2 for Vue is installed.","triggerScenarios":"`import BeakerIcon from '@heroicons/vue/outline/BeakerIcon'` or property access via `@heroicons/vue/outline` with heroicons v2 installed. The Proxy get trap throws naming the requested icon via `${property}`.","commonSituations":"Vue 2/3 projects migrating from heroicons v1; following outdated v1 docs or component libraries; lockfile/dedupe leaving v2 installed while code expects v1 paths; codegen templates emitting `outline/` imports.","solutions":["Rewrite to a v2 subpath: `import { BeakerIcon } from '@heroicons/vue/24/outline'`.","Or pin v1: `npm install @heroicons/vue@v1` if staying on the v1 import layout.","Search the repo for `@heroicons/vue/outline/` and migrate each import to the 16/20/24 outline directories.","Upgrade or patch any internal UI library that still generates v1-style Vue imports."],"exampleFix":"// before\nimport BeakerIcon from '@heroicons/vue/outline/BeakerIcon'\n\n// after\nimport { BeakerIcon } from '@heroicons/vue/24/outline'","handlingStrategy":"validation","validationCode":"// detect v1 outline paths against v2\nconst pkg = require('@heroicons/vue/package.json')\nif (pkg.version.startsWith('2.')) {\n  // fail the build if legacy paths are referenced anywhere\n  const { execSync } = require('child_process')\n  const hits = execSync(\"grep -rl \\\"@heroicons/vue/outline/\\\" src || true\").toString().trim()\n  if (hits) throw new Error('v1-style @heroicons/vue/outline imports found: ' + hits)\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Pin '@heroicons/vue' major and commit the lockfile.","CI grep to reject '@heroicons/vue/outline/' import paths under v2.","Codemod outline imports to '@heroicons/vue/24/outline' during migration.","Upgrade shared Vue UI libraries emitting v1 paths."],"tags":["import","version-mismatch","breaking-change","migration","vue"],"backgroundTag":"heroicons-v1-v2-import-mismatch","analyzedSha":"616b7a4dbbf3d011760af8066262cd5c6b3868f3","analyzedAt":"2026-08-31T21:42:00.885Z","schemaVersion":2},"datasetVersion":"2026-08-31T22:30:34.772Z"}