Develop Reference

NuxtJS add external script component not working

I'm trying to embed a script from an external JS, according to the documentation and this post (Include external javascript file in a nuxt.js page) I have something like the following...
<template>
<div>
<blocksurvey-widget>
some details
</blocksurvey-widget>
</div>
</template>
export default {
head: {
script: [
{
type: "module",
src: "https://blocksurvey.io/assets/js/blocksurvey-widget.js",
},
],
},
}
I am wondering why this is not working and throws the [Vue-warn] error:
Unknown custom element: <blocksurvey-widget> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I believe the script is appended to the head, and I think I need to register the component, but I had the impression this would be working normally once the script has been added. Do I have find some way to add the <blocksurvey-widget> component?

Render local image in Vue component where image location is stored in data attribute

I'm trying to render an image from my assets folder in a Vue project. The image displays when I hardcode it in using any of the following methods:
<img src="../assets/my_image.jpg"></img>
<img :src="require('../assets/my_image.jpg')"></img>
<img src="#/assets/my_image.jpg"></img>
<img :src="require('#/assets/my_image.jpg')"></img>
However I can't get the image to render I store that location in a data attribute called imgLocation, where imgLocation='../assets/my_image.jpg' or imgLocation='#/assets/my_image.jpg':
<img :src="imgLocation"></img>
<img :src="require(imgLocation)"></img>
The first element shows no image and logs nothing to the console. The second element shows the following errors in the console:
[Vue warn]: Error in render: "Error: Cannot find module '#/assets/my_image.jpg'"
Error: Cannot find module '#/assets/my_image.jpg'
at webpackEmptyContext (eval at ./src/components sync recursive (app.js:6618), :2:10)
Any idea what I'm doing wrong here?

In the second case the bindings are evaluated at run-time. You want the path to be resolved at build-time. So you should probably do imgLocation: require('../assets/my_image.jpg') or imgLocation: require('#/assets/my_image.jpg') in the data section of your component.

How can I importing external JS file in Ionic 3

I am finding problem in adding the external js file to Ionic 3. Here is what I did, I have created a hamburg.js file in src/js/hamburg.js, and called the script file in index.html at app/index.html. And I have added the html code in testpage.hmtl and css in testpage.scss. Also declared in app.component.ts. Here is my code
app.component.ts
declare var wrapperMenu;
hamburg.js
var wrapperMenu = document.querySelector('.wrapper-menu');
wrapperMenu.addEventListener('click', function(){
wrapperMenu.classList.toggle('open');
})
index.html
<script src="assets/js/hamburg.js"></script>
testpage.html
<div class="wrapper-menu">
<div class="line-menu half start"></div>
<div class="line-menu"></div>
<div class="line-menu half end"></div>
Can somebody guide me please?

There is no need to external js file, this plugin play mostly with CSS.
this snippet
var wrapperMenu = document.querySelector('.wrapper-menu');
wrapperMenu.addEventListener('click', function(){
wrapperMenu.classList.toggle('open');
})
can be putted on app.component.ts file. or if you have separate component for the header will be better to put the code in its ts file specifically on ngOnInit() hook.
Edit the best hook in component life-cycle is to put this code into ngAfterViewInit() hook.
Edit 2: Another good practice is to used the predefined class menu-content-open that is added automatically when the menu is opened and you can change the selector in your CSS code from .open to menu-content-open
check my forked example from your original one here.
Note the code will work perfect when you add it into the ionic app.

Adding a new Angular Dependancy

I'm new to angular and I think I'm doing this right but I'm not sure. I just got pushed into a project without much help and I'm trying to figure this out. I need to make some data using a tree view. The old code was using ng-repeat so I need to do something like that. I found a library that can help with that called treeRepeat. I have 0 experience using npm or bower so I just downloaded "module.js" and "tree-repeat.js" and added it to the project and then added it to a bundle and called it in my html page but I get a error injecting module error and I can't figure out why.
I have the error link at bottom but its a huge link and I have no idea on how to hyperlink it.
App.js
var app = angular.module('app', ['angularFileUpload', 'ngSanitize', 'ui.mask', 'ui.select', 'ui.bootstrap', 'ui.bootstrap.tpls', 'angular.filter', 'smart-table', 'colorpicker.module', 'sf.treeRepeat'])
.config(function ($httpProvider) {
//make delete type json to facilitate passing object
//to our generic method.
$httpProvider.defaults.headers["delete"] = {
'Content-Type': 'application/json;charset=utf-8'
};
});
EDIT: New error when I changed the bundle order. It now goes jquery first, treerepeat, and then angularjs.
https://docs.angularjs.org/error/$injector/nomod?p0=sf.treeRepeat
Calling code:
<div class="row">
<ul>
<li sf-treepeat="role in vm.roles">
{{role.RoleName}}
<ul>
<li sf-treecurse></li>
</ul>
</li>
</ul>
Bundle Order (The 2 files I added with tree-repeat are at the end of the angularjs bundle:
#section scripts {
#Scripts.Render("~/bundles/manageUser")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/angularjs")
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
}

Iron Router: Load js script after template has been rendered

I'm trying to load a javascript file (using IRLibloader) after the Iron Router has rendered the template:
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading',
});
Router.route('/', {
name: 'landing',
template: 'landing',
onBeforeAction: function () {
var googleAPI = IRLibLoader.load('http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false');
var fancyInput = IRLibLoader.load('/js/fancyInput.js');
var geoComplete;
if(googleAPI.ready()){
geoComplete = IRLibLoader.load('/js/jquery.geocomplete.min.js');
}
if(googleAPI.ready() &&
fancyInput.ready() &&
geoComplete.ready()){
console.log('All ready');
this.next(); // Render the page when all the libraries are ready
// Testing this here
if(Meteor.isClient){
console.log("Meteor.isClient");
IRLibLoader.load('/js/landing.js');
// Set places autocomplete
Template.landing.rendered = function(){
$('section :input').val('').fancyInput()[0].focus();
$('section :input').geocomplete();
console.log("loading.js ejecutandose (after render)");
}
}
}
}
});
But when I browse localhost:3000, the layout gets rendered, the googleAPI, fancyInput and geocomplete libraries are loaded too since the 'all ready' message gets printed at console, and landing.js also gets loaded (since it loads the background image and the message 'Meteor.isClient' also gets printed).
But then, the 'landing' template never gets rendered. Its content does not appear, and the console message inside the Template.landing.rendered never gets printed. This is the template.js file:
<template name="landing">
<img id='logo' src="img/logos/logo.png">
<div id='content'>
<section class='input'>
<div>
<input type='text' placeholder='Type text here'>
</div>
</section>
</div>
</template>
I also tried loading landing.js with onAfterAction, which seems to happen before the onBeforeAction according to the Firebug console. How strange!
I can't understand why the template is not being loaded, since no error appears at meteor console. Any idea?
EDIT: it does work if I remove the layout, which looks like this:
<template name="layout">
<head>
<title>Welcome to my app</title>
</head>
</template>
What's wrong with this layout?

So, I think you might be overthinking this a little. Why not use existing packages for these libraries? Aside from being significantly easier to use, some of that 3rd party code would get minified into the main app js file instead of making additional HTTP requests to download them.
For example, dburles:google-maps gets you the Google Maps API and extra libs of your choice (with the option to only load on specific routes) and jeremy:geocomplete gets you Geocomplete (which automatically installs that maps package as a dependency). See the jeremy:geocomplete README for implementation.
As for Fancy Input, why not create a simple Meteor package wrapper for that so you can just meteor add fancy-input?
Also, your Template.landing.rendered callback should not be in an onBeforeAction. Ideally, it should be in its own file with other code for the landing template.