Vue Fix, Crash & Optimization Guide

Vue is a progressive JavaScript framework for building user interfaces, created by Evan You and the Vue core team. It scales from a single component to full single-page apps, often paired with Vite and (for SSR) Nuxt.

Install / First Setup

Scaffold a project with the official CLI:

npm create vue@latest my-app
cd my-app
npm install
npm run dev

To add Vue to an existing project: npm install vue. Vue 3 is the current major and is built around the Composition API, though the Options API is still supported.

Common Issues & Fixes

"Property or method 'X' is not defined on the instance"

Cause: A template references data/state that was never declared in setup() / data(). Fix: Declare the variable via ref()/reactive() (Composition API) or in the data() return (Options API), and ensure template refs are bound correctly.

Hydration mismatch in SSR/Nuxt

Cause: Rendering time-dependent or browser-only values (e.g. Date, localStorage) on the server and client differently. Fix: Compute such values in onMounted, or wrap browser-only markup in <ClientOnly> (Nuxt) so it is not server-rendered.

Vue 2 to Vue 3 migration errors

Cause: Removed/renamed APIs (filters, EventBus, Vue.extend, prop validation changes). Fix: Run the app under @vue/compat to surface incompatibilities, then follow the migration guide to replace deprecated patterns.

Dependency install fails or peer conflict

Cause: A plugin requires a Vue version you don't have, or a stale lockfile. Fix: rm -rf node_modules package-lock.json && npm install; pin compatible plugin versions from each package's docs.

"Failed to resolve import" at build time

Cause: Missing Vite alias or wrong relative path/extension. Fix: Add the alias in vite.config.js (resolve.alias) and use correct relative imports; Vite resolves .vue files natively.

Performance & Optimization

• Low-End (4–8 GB RAM): Vite dev is lightweight; run a single dev server. Avoid heavy browser extensions. Use the production build (npm run build) before measuring.
• Mid (16 GB): Use <script setup> for compiler-optimized bindings, v-once/v-memo for static or rarely-changing subtrees, and defineAsyncComponent to code-split routes/components.
• Workstation (32 GB+): Split a large app into lazy routes with Vue Router's dynamic imports; profile re-renders and avoid deep reactive objects where a shallowRef/shallowReactive suffices.

Trim bundle size by importing only needed pieces (tree-shaking is on by default with ESM) and by code-splitting routes. Use the Vue DevTools performance tab to find hot components.

Version & Compatibility Notes

• Vue 3 is the current major; the Composition API (setup, ref, reactive) is preferred, with the Options API still supported.
• Vue 2 reached End-of-Life and no longer receives updates — migrate to Vue 3.
• Vue 3 requires a modern build step (Vite/Webpack 5); Node 18+ is recommended for the toolchain. For exact version support, consult official release notes.

FAQ

Q: Should I use the Composition API or Options API? A: New code should use the Composition API (<script setup>), which is more flexible and compiler-optimized. Options API remains supported for existing projects.

Q: Why do I see a hydration mismatch warning? A: The server and client rendered different HTML, usually from time/random/browser-only values. Move that logic into onMounted or a client-only wrapper.

Q: How do I lazy-load a component? A: Use defineAsyncComponent(() => import('./Comp.vue')), or dynamic imports in Vue Router for route-level splitting.

Q: Is Vue 2 still supported? A: No — Vue 2 is End-of-Life. Upgrade to Vue 3 via the @vue/compat migration build.

Q: How do I reduce bundle size? A: Rely on ESM tree-shaking, code-split routes with dynamic imports, and avoid importing all of a utility library when you need one function.

Q: Why won't my reactive change trigger a re-render? A: You likely mutated a nested property Vue can't track, or replaced a reactive root. Use ref/reactive correctly and assign new references for arrays/objects.

Related Guides

• React Fix & Optimization Guide
• Svelte Fix & Optimization Guide
• Dev RAM Calculator

Accuracy Note

Commands and paths reflect common, real-world setups as of 2026-08. Always verify against your installed version and OS. When in doubt, consult the official Vue documentation.