发表新帖
发表新帖

Injecting into <head> in Vue.js

前端 未结
关注
4 2044
情歌与酒
情歌与酒 2021-01-03 22:15

I have a few EXTERNAL scripts that need to be loaded on various pages, such as Google Places Autocomplete, Facebook APIs, etc.

Obviously it does not make sense to lo

4条回答
  • 傲寒
    傲寒 (楼主)
    2021-01-03 22:21

    We had this issue as well. We load JavaScripts by other means. We created a library that does this for us (quick and dirty, observing browser events and adding the JavaScript tag). This library also, implements a mediator pattern (https://addyosmani.com/largescalejavascript/#mediatorpattern) fires an event of "page:load" (custom for us) at the very end once all libraries have been loaded. Our VueJS components are executed only when that event fires. This also allowed us to put Vue components in the header tag instead of body, as the browser will load it, but not execute the function until the event is fired.

    var loadVueComponents=function()
{
    var myComponents=new Vue({....});
};
Mediator.subscribe("page:load",loadVueComponents);

    Before I get downvotes for not using Webpack or any of those other tools, this was an old application with a lot of JavaScripts (some cannot be minified or even concatenated/bundle with other files) and we needed to add some new components (now using Vue) and trying to disrupt as little as possible existing pages (mediator pattern was already implemented and loading dynamic libraries based on page attributes)

    0 讨论(0)
 看不清?
提交回复
热议问题