diff --git a/packages/vite/src/node/optimizer/esbuildDepPlugin.ts b/packages/vite/src/node/optimizer/esbuildDepPlugin.ts
index 57e67c2b47a166..04c978130f256c 100644
--- a/packages/vite/src/node/optimizer/esbuildDepPlugin.ts
+++ b/packages/vite/src/node/optimizer/esbuildDepPlugin.ts
@@ -12,7 +12,7 @@ import {
   moduleListContains,
   normalizePath
 } from '../utils'
-import { browserExternalId } from '../plugins/resolve'
+import { browserExternalId, optionalPeerDepId } from '../plugins/resolve'
 import type { ExportsData } from '.'
 
 const externalWithConversionNamespace =
@@ -93,6 +93,12 @@ export function esbuildDepPlugin(
         namespace: 'browser-external'
       }
     }
+    if (resolved.startsWith(optionalPeerDepId)) {
+      return {
+        path: resolved,
+        namespace: 'optional-peer-dep'
+      }
+    }
     if (ssr && isBuiltin(resolved)) {
       return
     }
@@ -279,6 +285,22 @@ module.exports = Object.create(new Proxy({}, {
         }
       )
 
+      build.onLoad(
+        { filter: /.*/, namespace: 'optional-peer-dep' },
+        ({ path }) => {
+          if (config.isProduction) {
+            return {
+              contents: 'module.exports = {}'
+            }
+          } else {
+            const [, peerDep, parentDep] = path.split(':')
+            return {
+              contents: `throw new Error(\`Could not resolve "${peerDep}" imported by "${parentDep}". Is it installed?\`)`
+            }
+          }
+        }
+      )
+
       // yarn 2 pnp compat
       if (isRunningWithYarnPnp) {
         build.onResolve(
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
index 13ac18ae384371..f33105d265a27a 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -30,6 +30,7 @@ import {
   isPossibleTsOutput,
   isTsRequest,
   isWindows,
+  lookupFile,
   nestedResolveFrom,
   normalizePath,
   resolveFrom,
@@ -44,6 +45,8 @@ import { loadPackageData, resolvePackageData } from '../packages'
 // special id for paths marked with browser: false
 // https://github.com/defunctzombie/package-browser-field-spec#ignore-a-module
 export const browserExternalId = '__vite-browser-external'
+// special id for packages that are optional peer deps
+export const optionalPeerDepId = '__vite-optional-peer-dep'
 
 const isDebug = process.env.DEBUG
 const debug = createDebugger('vite:resolve-details', {
@@ -365,6 +368,14 @@ export default new Proxy({}, {
 })`
         }
       }
+      if (id.startsWith(optionalPeerDepId)) {
+        if (isProduction) {
+          return `export default {}`
+        } else {
+          const [, peerDep, parentDep] = id.split(':')
+          return `throw new Error(\`Could not resolve "${peerDep}" imported by "${parentDep}". Is it installed?\`)`
+        }
+      }
     }
   }
 }
@@ -618,6 +629,30 @@ export function tryNodeResolve(
   })!
 
   if (!pkg) {
+    // if import can't be found, check if it's an optional peer dep.
+    // if so, we can resolve to a special id that errors only when imported.
+    if (
+      basedir !== root && // root has no peer dep
+      !isBuiltin(id) &&
+      !id.includes('\0') &&
+      bareImportRE.test(id)
+    ) {
+      // find package.json with `name` as main
+      const mainPackageJson = lookupFile(basedir, ['package.json'], {
+        predicate: (content) => !!JSON.parse(content).name
+      })
+      if (mainPackageJson) {
+        const mainPkg = JSON.parse(mainPackageJson)
+        if (
+          mainPkg.peerDependencies?.[id] &&
+          mainPkg.peerDependenciesMeta?.[id]?.optional
+        ) {
+          return {
+            id: `${optionalPeerDepId}:${id}:${mainPkg.name}`
+          }
+        }
+      }
+    }
     return
   }
 
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index 85f85adf3cf550..0f681ec8f7378f 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -390,6 +390,7 @@ export function isDefined<T>(value: T | undefined | null): value is T {
 interface LookupFileOptions {
   pathOnly?: boolean
   rootDir?: string
+  predicate?: (file: string) => boolean
 }
 
 export function lookupFile(
@@ -400,7 +401,12 @@ export function lookupFile(
   for (const format of formats) {
     const fullPath = path.join(dir, format)
     if (fs.existsSync(fullPath) && fs.statSync(fullPath).isFile()) {
-      return options?.pathOnly ? fullPath : fs.readFileSync(fullPath, 'utf-8')
+      const result = options?.pathOnly
+        ? fullPath
+        : fs.readFileSync(fullPath, 'utf-8')
+      if (!options?.predicate || options.predicate(result)) {
+        return result
+      }
     }
   }
   const parentDir = path.dirname(dir)
diff --git a/playground/optimize-deps/__tests__/optimize-deps.spec.ts b/playground/optimize-deps/__tests__/optimize-deps.spec.ts
index df0c080f09ab47..fd717b0401499b 100644
--- a/playground/optimize-deps/__tests__/optimize-deps.spec.ts
+++ b/playground/optimize-deps/__tests__/optimize-deps.spec.ts
@@ -88,6 +88,19 @@ test('dep with dynamic import', async () => {
   )
 })
 
+test('dep with optional peer dep', async () => {
+  expect(await page.textContent('.dep-with-optional-peer-dep')).toMatch(
+    `[success]`
+  )
+  if (isServe) {
+    expect(browserErrors.map((error) => error.message)).toEqual(
+      expect.arrayContaining([
+        'Could not resolve "foobar" imported by "dep-with-optional-peer-dep". Is it installed?'
+      ])
+    )
+  }
+})
+
 test('dep with css import', async () => {
   expect(await getColor('.dep-linked-include')).toBe('red')
 })
diff --git a/playground/optimize-deps/dep-with-optional-peer-dep/index.js b/playground/optimize-deps/dep-with-optional-peer-dep/index.js
new file mode 100644
index 00000000000000..bce89ca18f3ad7
--- /dev/null
+++ b/playground/optimize-deps/dep-with-optional-peer-dep/index.js
@@ -0,0 +1,7 @@
+export function callItself() {
+  return '[success]'
+}
+
+export async function callPeerDep() {
+  return await import('foobar')
+}
diff --git a/playground/optimize-deps/dep-with-optional-peer-dep/package.json b/playground/optimize-deps/dep-with-optional-peer-dep/package.json
new file mode 100644
index 00000000000000..bf43db6b7919d9
--- /dev/null
+++ b/playground/optimize-deps/dep-with-optional-peer-dep/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "dep-with-optional-peer-dep",
+  "private": true,
+  "version": "0.0.0",
+  "main": "index.js",
+  "type": "module",
+  "peerDependencies": {
+    "foobar": "0.0.0"
+  },
+  "peerDependenciesMeta": {
+    "foobar": {
+      "optional": true
+    }
+  }
+}
diff --git a/playground/optimize-deps/index.html b/playground/optimize-deps/index.html
index 7b0c43e82fdcbc..fe507e9ba568f4 100644
--- a/playground/optimize-deps/index.html
+++ b/playground/optimize-deps/index.html
@@ -59,6 +59,9 @@ <h2>
 <h2>Import from dependency with dynamic import</h2>
 <div class="dep-with-dynamic-import"></div>
 
+<h2>Import from dependency with optional peer dep</h2>
+<div class="dep-with-optional-peer-dep"></div>
+
 <h2>Dep w/ special file format supported via plugins</h2>
 <div class="plugin"></div>
 
@@ -152,6 +155,13 @@ <h2>Flatten Id</h2>
   text('.reused-variable-names', reusedName)
 </script>
 
+<script type="module">
+  import { callItself, callPeerDep } from 'dep-with-optional-peer-dep'
+  text('.dep-with-optional-peer-dep', callItself())
+  // expect error as optional peer dep not installed
+  callPeerDep()
+</script>
+
 <script type="module">
   // should error on builtin modules (named import)
   // no node: protocol intentionally
diff --git a/playground/optimize-deps/package.json b/playground/optimize-deps/package.json
index 19184eb8af8c77..5ae5e7a5e80e96 100644
--- a/playground/optimize-deps/package.json
+++ b/playground/optimize-deps/package.json
@@ -23,6 +23,7 @@
     "dep-with-builtin-module-cjs": "file:./dep-with-builtin-module-cjs",
     "dep-with-builtin-module-esm": "file:./dep-with-builtin-module-esm",
     "dep-with-dynamic-import": "file:./dep-with-dynamic-import",
+    "dep-with-optional-peer-dep": "file:./dep-with-optional-peer-dep",
     "added-in-entries": "file:./added-in-entries",
     "lodash-es": "^4.17.21",
     "nested-exclude": "file:./nested-exclude",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0f9c324f7f1afd..78dc123195cb9d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -628,6 +628,7 @@ importers:
       dep-with-builtin-module-cjs: file:./dep-with-builtin-module-cjs
       dep-with-builtin-module-esm: file:./dep-with-builtin-module-esm
       dep-with-dynamic-import: file:./dep-with-dynamic-import
+      dep-with-optional-peer-dep: file:./dep-with-optional-peer-dep
       lodash: ^4.17.21
       lodash-es: ^4.17.21
       lodash.clonedeep: ^4.5.0
@@ -655,6 +656,7 @@ importers:
       dep-with-builtin-module-cjs: file:playground/optimize-deps/dep-with-builtin-module-cjs
       dep-with-builtin-module-esm: file:playground/optimize-deps/dep-with-builtin-module-esm
       dep-with-dynamic-import: file:playground/optimize-deps/dep-with-dynamic-import
+      dep-with-optional-peer-dep: file:playground/optimize-deps/dep-with-optional-peer-dep_vue@3.2.37
       lodash: 4.17.21
       lodash-es: 4.17.21
       lodash.clonedeep: 4.5.0
@@ -714,6 +716,9 @@ importers:
   playground/optimize-deps/dep-with-dynamic-import:
     specifiers: {}
 
+  playground/optimize-deps/dep-with-optional-peer-dep:
+    specifiers: {}
+
   playground/optimize-deps/nested-exclude:
     specifiers:
       nested-include: file:../nested-include
@@ -9364,6 +9369,21 @@ packages:
     version: 0.0.0
     dev: false
 
+  file:playground/optimize-deps/dep-with-optional-peer-dep_vue@3.2.37:
+    resolution: {directory: playground/optimize-deps/dep-with-optional-peer-dep, type: directory}
+    id: file:playground/optimize-deps/dep-with-optional-peer-dep
+    name: dep-with-optional-peer-dep
+    version: 0.0.0
+    peerDependencies:
+      test: '*'
+      vue: ^3.2.37
+    peerDependenciesMeta:
+      test:
+        optional: true
+    dependencies:
+      vue: 3.2.37
+    dev: false
+
   file:playground/optimize-deps/nested-exclude:
     resolution: {directory: playground/optimize-deps/nested-exclude, type: directory}
     name: nested-exclude