How do I check for vue js compilation errors before trying to serve it? - vue.js

I've just lost a frustrating amount of time trying to work out why npm run serve was hanging when attempting to run my vue js app. Eventually, I tracked it down to one error in a vue file I made, it took me a long time to work this out since the issue manifests itself in a way that the console window just hangs.
Is there some other way developers can get a more descriptive error list from vue js prior to attempting to run/build?

Personally, I find the most useful and essential tools to be (I use VS Code as "IDE")
Vetur: includes syntax-highlighting, snippets, linter (error checking), auto completition, etc.
Vue.js devtools (for chrome): Not sure about other browsers, but this is incredibly useful for chrome. Let's you see what's really going on with vue.js' components, the store, etc (screenshot from the chrome store page).
Hope this helps!

Related

NetSuite Suitelet/RESTlet to display VueJS app

I am attempting to build a popup Suitlete that displays a Vue app. It needs to have the ability to pass data back and forth into the transaction that opened it.
Has anyone done this in the past and if so what did the setup for the Vue files and the Suitelet/RESTlet look like? Can't seem to find examples.
You can find projects on GitHub that have great Vue/NetSuite project file setups, ones where you can use Vue CLI to work locally that still work with RESTlets. Here's one https://github.com/michoelchaikin/netsuite-mapreduce-util

Nuxt Showing 2 Instances of Vue Running

Why do I have 2 instances of Vue running in Nuxt?
This happens in both Nuxt apps I'm working on.
I saw somewhere here they recommended nuking and reinstalling node modules, tried that with no change.
I also disabled my plugins prior to taking this snap, there is no place in the app that's calling Vue other than the Nuxt internals.
How do I make this stop?
This doesn't happen in production, or when running from an actual domain ie: on Valet. Nor is there any effect when producing static pages, so this really isn't an issue.
Once I moved it to a domain, it stopped even in dev so no reason to pursue this any further.

How to stop Electron from printing devtools extension errors to console?

I've been using Vue devtools extension with Electron and whenever I activate and use Vue devtools, all the errors occurred from it gets printed out to the Electron's main process console like this.
It's so frustrating because It's hard to find any useful information printed out from my application in middle of these thousands of errors.
I know why the error occurs. It's because Vue devtools is trying to access the chrome.tabs.captureVisibleTab() function which isn't available on Electron but I don't really care about the errors occurring from Vue devtools here. I just need to stop Electron from printing these errors out. Looked through all of the devtools related documentation but found nothing on this.

Vue Native - Debugging

Recently I switched from Ionic framework to vue-native (vue.js wrapper around react-native), everything seems to be cool, development is fast and easy, but I have some real issues with debugging those apps. With Ionic Framework (Cordova) I was able to open an app in web browser and could easily manage Vuex state (for example) from Chrome Console. It doesn't seems so easy and trivial in react native world. Is it possible to have similar debugging experience in vue-native? When my app starts to grow and gets complicated it's really hard to handle it other way around. Any help appreciated.
Basically all my problems gone away when I ported my apps to Expo (which allows for JS remote debugging) and grabbed React Native Debugger - https://github.com/jhen0409/react-native-debugger.
Important part is having simulator installed on your developer machine (like iphone simulator) because debugger doesn't play nicely with real machines.
Inside debugger hit cmd+t to open a new window and set port to 19001 (because of Expo using this port). Now start expo with npm start command and in Expo panel hit 'Run in simulator' button.
In simulator make a shake gesture (ctrl+cmd+z) and allow remote debugging in developer menu.
Done. Pleasant experience similar to one known from Cordova. You have a js console, you can inspect elements and change styles live. Expo comes with live reload to make things smoother.
More info here: https://docs.expo.io/versions/latest/workflow/debugging/
Unfortunately, you cannot debug script parts in the VUE files in Chrome Dev Tools (you can put the breakpoints, but they are not working well), but if you put the methods to a separate JS file, it works like a charm. I know, it's a workaround, but not a big pain, and working well.
See my TODO app for example: https://github.com/TheBojda/VueNativeTodo

Aurelia bundling and exporting not works properly

It is maybe a trivial question but I am quite lost in topic I don't know.
I am writing my first app n Aurelia using ES2016. I wanted to export my app to server for some testing.
As I learn in Plularsight course https://app.pluralsight.com/library/courses/aurelia-fundamentals/ that the easiest way to bundle and export is to use Aurelia Skeleton Navigation - by changing all theirs src files to ours and adding all the missing dependencies in package.json, and also adding them to bundle.js and export.js.
When I use
git bundle
git serve
Bundling works fine, and app is running fine.
But when i run
gulp export
The files in export dir not working properly. I have an "Uncaught SyntaxError: Unexpected token <" error in almost js file I wrote or added to my App (not in aurelia files :/ I deployed it temporally here so you can check https://amazingcms-0-3.firebaseapp.com/drag/posts
It looks like I messed it up at all :/ I don't know what files I should show you to help, so please tell me, or give mi a good source where I can learn how to export my app. It is possible to do it without the Aurelia Skeleton Navigation? I think I even don't necessarily need bundling only transpiling (I'm using Babel runtime). I want to check if my app works on server it can work slow at this step.