Why You See "Vue is Not a Constructor"
This error usually occurs when you're trying to use new Vue() to create an instance, but:
- Vue is not imported correctly, or
- Vue is no longer a constructor (as in Vue 3)
Let’s walk through common causes and fixes.
Common Cause 1: Using Vue 3 with Vue 2 Syntax
In Vue 2, it was common to create a new instance like this:
import Vue from 'vue';new Vue({
render: h => h(App),
}).$mount('#app');
In Vue 3, you no longer use new Vue(). Instead, the new standard is to initialize the app using createApp().
Vue 3 Fix: Use createApp()
import { createApp } from 'vue';import App from './App.vue';
createApp(App).mount('#app');
Trying to use new Vue() with Vue 3 will result in the "Vue is not a constructor" error because createApp replaces the constructor-based approach.
Common Cause 2: Incorrect Import Statement
Sometimes, the error occurs because Vue is being imported incorrectly, especially when using import * as Vue from 'vue'.
Incorrect:
import * as Vue from 'vue';
new Vue({ /* ... */ }) // Not valid
Correct (for Vue 3):
import { createApp } from 'vue';
Correct (for Vue 2):
import Vue from 'vue';
Make sure your import matches the version of Vue you're using.
Also Read: Top VueJS Interview Questions to Ask Before Hiring a Vue.js Developer
Common Cause 3: Using Vue in Unsupported Environments
If you're using Vue with a tool or library that doesn't fully support it, like outdated bundlers or incorrect CDN scripts, Vue may not be exposed properly.
To avoid this issue:
- Ensure you're using the correct version of Vue (2 or 3).
- Install Vue via npm or yarn, or use a properly configured CDN link.
Key Takeaway
The "Vue is not a constructor" error occurs when using outdated Vue 2 syntax or incorrect imports in a Vue 3 project. To fix it, ensure you're using createApp() instead of new Vue() in Vue 3, and double-check your import statements and project setup.
Related Resources
