We Keep Coding

<route-list/> in Vue application?

I maintain a web application built on VueJS+Vuetify with some AngularJS. There is a tag in a .vue file I have never seen before and cannot find any documentation on anywhere: <route-list/>
Code:
<route-list v-bind:routes="computedData" />
From what I can tell it binds a list of routes into a side bar navigation based on a computed function.
Is this some kind of depreciated Vue tag? I can't find anything on this tag whatsoever.

Are you sure it is not your own plugin?
Vue.use (<plugin>);
See more details: https://v2.vuejs.org/v2/guide/plugins.html#Using-a-Plugin

DOM operations in VSCode Webview used to edit all local paths

I want to create some extension to VSCode using its Webview feature. I want to show HTML preview as a feature of my extension. As I can see in VSCode API documentation of WebView the paths for resources have to be registered and edit in a special way.
I want to load HTML from the file and then edit and register all paths to CSS and JS into it to create the preview of this one. In my opinion, using some DOM manipulating is the easiest way to create it. Simple import of jsdom doesn't work, even if the same example works in plain Node.js. Have anyone done a similar thing in the way it works well? Maybe there is some other way to solve this problem.
Thank you in advance.

I have done this in the past and the way that it worked was to read that file (with fs in my case) that contains the HTML and render it afterwards. Any resources you want to use have to be passed inside the localResourceRoots array as an option in the vscode.ViewColumn.
Here is a full example:
const panel = vscode.window.createWebviewPanel(
'catCoding',
'Cat Coding',
vscode.ViewColumn.One,
{
// Only allow the webview to access resources in our extension's media directory
localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'media'))]
}
);

In which lifecycle method should I place the materialize dropdown menu initializer in Vue js?

As you can see in the materialize docs, using this on a plain html file is quite simple: paste the html somewhere in the body, and paste the js initializer on a script tag. It works fine.
I'm wondering how I can use this on a vue component? I'm talking a .vue file with template, script, style sections.

You could try and call this code in one of Vue's lifecycle hooks (see this diagram to find out where exactly they're executed), you'll probably want to use mounted.
But keep in mind this isn't really a bulletproof solution. Vue may manipulate the DOM in different ways later and as such isn't necessarily compatible with Materialize. The best solution in these cases is always to find a framework-specific implementation of the components you're trying to use, e.g. Vue Material.

I would advice you to include initialize function to mounted() {...} section of a .vue single file component to make sure all HTML tags already exist.

Angular Dart external JS

I am building an Angular-Dart site based on a commercial Bootstrap template.
The correct rendering should be like this:
I used IntelliJ to scaffold a Dart/Angular app and started to modify from there.
I have put related files (CSS/JS/images) of that template into web/css, web/js, respectively.
HTML used is verbatim copied from the template but I have taken out the CSS, JS reference from btqun_component.html and moved into index.html.
The output is like this:
Obviously, the CSS is working, and the header/footer are showing correctly. But the masonry effect is not showing, so I doubt that is related to JS reference.
Can anyone give any hints on this?

Do you have a documentation for the bootstrap template ? I guess you need to execute the javascript they provide to you so you need to add it to your index.html, and you probably need to import bootstrap and jquery too.
If you need to call a javascript function you can do it directly in the index.html inside a script tag or build a dart wrapper using package:js
EDIT: answer to call jQuery function from Dart

How to use javascript in Silverstripe CMS?

I'm using SilverStripe 3.0 CMS, and I need to include a Google Map into the CMS.
I'm following this steps, and besides it's a little bit old, the official documentation uses the same methods in the current version of SilverStripe (At least it seems to be the current version documentation).
The issue is in this part of the code:
Behaviour.register({
"#Form_EditForm" : {
initialize : function() {
this.observeMethod("PageLoaded", this.adminPageHandler);
this.adminPageHandler();
},
adminPageHandler : function() {
initialize();
}
}
});
First of all, Behaviour was not defined. I needed to include manually the behaviour.js file that comes within the framework. But now, I get a Type Error:
this.observeMethod is not a function
Can someone give me a hint of what can I do in order to call a javascript function when a page editor is opened in the SilverStripe CMS?

the 'Behaviour.register' call you mention is definitly deprecated and no longer available in the core code, so the docs need an update here.
unfortunately, i couldn't find a documented way to replace this behaviour, but for now the following should work for you, based on the approach in the forum post you mentioned first hand:
find the 'initGoogleMaps.js' script added here:
function getCMSFields() {
Requirements::javascript('mysite/javascript/initGoogleMaps.js');
...
inside this script, remove the Behaviour.register... block, and move the initialize function outside document.ready (or simply remove the document.ready part), so initialize is globally available (you might consider renaming it).
then, add the following inside getCMSFields:
$fields->addFieldToTab('Root.Content', new LiteralField('js', '<script>initialize();</script>'));
this will ensure the initialize function is called every time a page's 'edit view' is rendered inside the cms.
hth

As mentioned by ben,
LeftAndMain::require_javascript('mysite/javascript/initGoogleMaps.js')
is more reliable than 'include-it when needed'. Why?
Because Silverstripe uses Ajax, it is better to load any javascript or css on the first load, so that they are ready when you go to different model admin areas within the CMS in ajax-powered environment. Not loading at the start causes inconsistency and your js, css files will not be loaded when you don't hard-load that admin area.
From documentation: http://doc.silverstripe.org/framework/en/reference/requirements and http://api.silverstripe.org/3.0/class-LeftAndMain.html
The whole "include it when you need it" thing shows some weaknesses in
areas such as the CMS, where Ajax is used to load in large pieces of
the application, which potentially require more CSS and JavaScript to
be included. At this stage, the only workaround is to ensure that
everything you might need is included on the first page-load.
One idea is to mention the CSS and JavaScript which should be included
in the header of the Ajax response, so that the client can load up
those scripts and stylesheets upon completion of the Ajax request.
This could be coded quite cleanly, but for best results we'd want to
extend prototype.js with our own changes to their Ajax system, so that
every script had consistent support for this.
By the way, the ideal place for this line is _config.php in your custom module or in mysite, depending on your needs.

LeftAndMain::require_javascript('mysite/javascript/initGoogleMaps.js')
would work much better