How can I make console.log() work in a Vue-cli app? - console.log

I am trying to add a console.log() call in my vue-cli app to support debugging. Here's an excerpt from my template
<v-btn v-on:click.native="console.log('start button clicked')"
color="primary rounded-pill">
Start
</v-btn>
However, when I run the app on localhost, I get the following message in the console:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "console"
is not defined on the instance but referenced during render. Make sure
that this property is reactive, either in the data option, or for
class-based components, by initializing the property.
I reviewed How enable console log in VUE-CLI during development, but it didn't seem to apply to my case, as I am not using eslint, and there is no eslintConfig section in my package.json file.
Any idea what else could be going on?

Try adding "this" so it would look like: this.console.log()
just make a vue method and call it on click

Related

Vaadin23: Expected router outlet to be a valid DOM Node (but got null) and HomeView rendered several times in production mode

when I run our vaadin 23 app in production mode, I get following error in the browser console, while the corresponding site is rendered twice:
Uncaught (in promise) TypeError: [Vaadin.Router] Expected router outlet to be a valid DOM Node (but got null)
First it's rendered with a corrupt textfield (UI written in Vaadin); the second page looks fine. When I try to debug (IntelliJ), it gets rendered correctly, so I added log messages, where I learned, that the HomeView gets initialized even three times, whereas in dev mode it is initialized once. I find it hard to figure out why, since that is run in a thread (I'm far from knowing Vaadin well).
We have two apps, a backoffice and a webshop. The non-responsive backoffice does not show this issue, only the webshop. The webshop also uses two lit web components (but even when I comment them out, I have the same error). The rest is all kept in Java.
Does anybody have an idea how to solve this, or in what direction to search and debug?
Thanks a lot! Sura
This is likely caused by a known bug with the eagerServerLoad flag. As a workaround, try disabling this flag to prevent the issue.
Add vaadin.eagerServerLoad=false to application.properties to disable the flag, assuming that your application uses Spring Boot. You could find alternative ways of setting the property see the Configuration Properties article.

How to remove the router from the quasar default app template?

I want to develop an app with only one root component without all the VueRouter machinery, and I generated the project with the quasar cli.
I cleaned the source directory to start fresh with a single A.vue component.
However, the compile process generates an app.js file that requires it (by the way, I would also like to get rid of the app.scss).
How to do that ?
(I don't need SSR, but I may build to electron.)
You always need at least one "route" for your application to work with Quasar. Doesn't mean you have to use all their special stuff - just add a "/" base route and give it "component: A".
Pretty easy.

VSCode extension IPC with UI inside HTML preview

I wish to develop a unit test runner extension for VSCode. The extension should display discovered tests grouped into expandable hierarchy, annotate run status, display output and errors for each test, provide run/debug commands on different levels, and of course the red/green bar.
Roughly spearating this into "model" and "view", I plan to implement the model in the extension process, and I plan to implement the view as HTML preview based on a TextDocumentContentProvider. (Is there a better approach?)
Now, the model and the view should communicate with each other. I want to implement the view as a single-page application. The view will send commands to the model, and the model will send events to the view (or the view will poll the model for events). The view will update itself according to received events.
My question is, what communication technique should I use? Can HTML page inside the HTML preview access VSCode/Atom/Electron/Node APIs? Can I share object instances, or do some lightweight IPC? By far I didn't figure out.
I've found that I can invoke VSCode commands or refresh the entire page, when the user clicks a link with href set to specific scheme (command:// or the one I registered for my TextDocumentContentProvider).
I do succeed to open an HTTP listener (http.createServer) in the extension process, and communicate through XMLHttpRequest on the HTML preview side. But it looks to me like a heavy overkill.
I wonder if there are more appropriate ways to do this?
Almenon is referring to the currently proposed Webview API that was released in version 1.21 (Feb 2018). For the time being, this appears to be a much better approach for HTML previews. But in order to use the API, there are special instructions. From the release notes:
These APIs are still proposed, so in order to use it, you must opt into it by adding a "enableProposedApi": true to package.json and you'll have to copy the vscode.proposed.d.ts into your extension project.
What isn't clarified (and probably should be) is how to add the downloaded declaration file to a project. One way to do it is place the file in $/node_modules/vscode, next to vscode.d.ts, which is generated during postinstall. Then add the following line to the top of vscode.d.ts:
/// <reference path="vscode.proposed.d.ts" />
That will link the type declaration files. To make this part of the installation process, write a build task to do it and then call it in the vscode:postinstall script in package.json.
VSCode has a new API that makes this easier.
https://github.com/Microsoft/vscode/issues/43713
You can find the new API here
To try the new API:
Add "enableProposedApi": true to your package.json
Manually download vscode.proposed.d.ts and add it to your project: https://raw.githubusercontent.com/Microsoft/vscode/master/src/vs/vscode.proposed.d.ts
Run your extension with the latest VS Code insiders build

JailBreak iOS: adding custom view to input call view

I need to add my custom view to input call view. I have got jail broken device with iOS 9.3.2. I've installed Theos to my MacBook. I've installed mobile substrate to iOS. And now I don't know what I need to do.
I found that I have to modify InCallService.app. But I cannot find needed class for tweak.
Also I don't understand how can I write logs. I tried to use NSLog(#"aaa") and %log(#"aaa") but I cannot find file with logs.
Thank you.
If you want to add something to the app, modifying the .app isn't the easiest way. If you have MobileSubstrate installed you can hook a method from the Phone application and using basic iOS paradigms like MVC you can find the views you need to modify and go from there. If you need the header files you can either dump them yourself with class-dump-z or see if these are still valid.
Logging data is also quite easy with Ryan Petrich's deviceconsole
Just run the command deviceconsole --process < YOUR HOOKED PROCESSES' NAME > in your console after installing deviceconsole onto your Mac, and anything in your code using %log(); will show up in the console.

How can I make Grails 2.2 "run-app" detect changes to UrlMappings.groovy?

When I invoke run-app in the Grails console, code changes are auto-detected, and a recompile is triggered.
But when I change conf/UrlMappings.groovy, even though I see "Compiling 1 source files" appear in the console, the live web server doesn't, in fact, update its behavior.
The problem appears specific to UrlMappings.groovy; for example, I can make changes to a controller class and they appear automatically when I hit "refresh" in the browser.
Any thoughts on what's causing this behavior and how I can fix it?
Thanks!

Resources