DEV Community

Cover image for A quick introduction to Vue.js

A quick introduction to Vue.js

Aditya Sridhar on November 02, 2018

This post was originally published in medium.freecodecamp.org Are you interested in Front End Development? If so, then this post is for you! T...
Collapse
 
drozerah profile image
Drozerah

Hi Aditya,

Following the first steps until "Congratulations, you have created your first Vue.js project!" then trying to open it with IE11 => BOOM ! Blank page is returned with a SCRIPT1002 message into the console. It must have something to see with the babel configuration, I spent 2hours strugling with that issue with no result...

Collapse
 
adityasridhar profile image
Aditya Sridhar • Edited

Interesting. Can you clone the code from my git repo and check the same. I did not configure babel manually for this. Vue Cli takes care of all that. Just checked loading the application in IE 11. It did work. Can you check if the remote url aditya-sridhar.github.io/vuejs-blo... loads for you?

Collapse
 
drozerah profile image
Drozerah • Edited

Yep, tested, same issue with your cloned repo !

issue

Thread Thread
 
adityasridhar profile image
Aditya Sridhar

What about the Remote URL?.

and did you try the cloned code in Chrome or safari ?

Sorry I am asking too many questions :D. But interested to know what is happening here

Thread Thread
 
adityasridhar profile image
Aditya Sridhar

Just Cloned the code and ran it and checked in Chrome and IE 11. It is loading. Wondering what is the issue here

can you try checking if this url loads aditya-sridhar.github.io/vuejs-blo...

It is the same code deployed in github pages

Thread Thread
 
drozerah profile image
Drozerah

Chrome is ok, I don't know about safari for now... There is an opened thread on the vue.js forum.

Thread Thread
 
drozerah profile image
Drozerah

Your remote url loads perfectly, that's not fair ! :)

Thread Thread
 
adityasridhar profile image
Aditya Sridhar • Edited

This is very weird :D

The same code is deployed in github pages.

Was just reading what is put in the forum.

Try adding this in vue.config.js ( you can delete the content in existing vue.config.js)

module.exports = {
  transpileDependencies: ['ansi-regex']
}

Not sure if this will work but worth a try :)

Thread Thread
 
drozerah profile image
Drozerah • Edited

Solved but not working without the existing vue.config.js content. So, the following is working :


module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/vuejs-blog-demo-part1/'
    : '/',
  transpileDependencies: ['ansi-regex']
}


`

Thread Thread
 
adityasridhar profile image
Aditya Sridhar

Awesome :D

Thanks for taking the time to try the code out :)

Thread Thread
 
drozerah profile image
Drozerah • Edited

New feature :)

If you npm run serve the vue project with the terminal, it is opened and works both under IE11 and Chrome... But !

By using Vue UI serve task, the localhost returns a blanck page for both IE11 and Chrome, see the chrome terminal message bellow :

At the same, time the SCRIPT1002 message in IE is back :)

Conclusion :

Trust your terminal first !

Thread Thread
 
adityasridhar profile image
Aditya Sridhar

Interesting. I never tried serve option from the UI.
Directly used the command line. So never came across this issue :)

Collapse
 
rnrnshn profile image
Olimpio

It's just amazing. I feel like I know vue now😂😂😂😂 thanks for the post. Waiting for more posts on vue js

Collapse
 
adityasridhar profile image
Aditya Sridhar

Thank you for reading:)

Happy it helped:)

Collapse
 
rattanakchea profile image
Rattanak Chea

This is great intro for Vue.js. I hope there is a follow up and u can point to one. Thanks

Collapse
 
adityasridhar profile image
Aditya Sridhar

Thank you.

Will be writing a follow up for this where I will cover more stuff on communication between components.

You can also checkout actual VueJS documentation vuejs.org/v2/guide/.
It's pretty good.