This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(240, 76%, 33%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ESS%3C/text%3E%3C/svg%3E)
Getting Uncaught TypeError: Vue is not a constructor while running the Tailwind Traders project which is mentioned in the "Build Serverless APIs with Azure Functions" learning module. Due to this, after the complete setup, the page is not showing the data.
How can this be resolved?
''
I also tried importing vue like this(changes in the first 2 lines):
import Vue from 'vue';
var foo = (function () {
(I then call foo(); in the end)
but I got the following error:
Appreciate some help on this.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(294.40000000000003, 87%, 38%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EMU%3C/text%3E%3C/svg%3E)
Hello @Sakshi Srirangam - I was able to clone, and run 'npm start' successfully to get the Vue.js based frontend up and running without any issues. Did you happen to have any pre-existing installation of VueJS on your machine? I'm not too familiar with VueJS but a quick search yields that the issue might be due to v2 vs v3 instantiations of VueJS: https://stackoverflow.com/questions/67198389/vue-is-not-defined-not-a-constructor
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(259.20000000000005, 89%, 35%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EFD%3C/text%3E%3C/svg%3E)
In the index.html file, force the VueJS version to 2, line 11 :
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(259.20000000000005, 79%, 35%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ESE%3C/text%3E%3C/svg%3E)
This answer worked for me! Thanks so much.