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