Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Injecting into <head> in Vue.js – Facebook api

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 load them on every route, however the documentation does not address this rather common scenario.

Furthermore, the Vue instance mounts onto a tag within the body, since

the mounted element will be replaced with Vue-generated DOM in all cases. It is therefore not recommended to mount the root instance
to < html > or < body >.

How are real world applications currently dealing with this situation?

Tags:

4

Answers


  1. 0

    This isn’t addressed in documentation because it’s not Vue’s job. Vue is meant for creating, among other things, single page applications (SPA). In a single page application you typically load all your vendor scripts (Google, Facebook, etc.) and your own scripts and styles the first time the site loads.

    A lot of real world applications just bundle all their vendor scripts into a single file (example: vendor.js) using Webpack, Gulp, Grunt or some other bundling tool. The rationale is that you can pack all those scripts into a single file, minify them, serve them with gzip compression and then it’s only a single request.

    Smarter bundlers like Webpack and Browserify can walk the dependency tree if you’re using require() or import to import your modules. This can be allow you to split your dependencies into several logical chunks so components and libraries only load load with their dependencies if they themselves are loaded.

    Login or Signup to reply.
  2. 0

    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)

    Login or Signup to reply.
  3. 0

    I recommend using https://www.npmjs.com/package/vue-head, it is exactly designed to inject the data you want from your component into the document’s head.
    Perfect for SEO title and meta tags.

    To be used like so:

    export default {
  data: () => ({
    title: 'My Title'
  }),

  head: {
    // creates a title tag in header.
    title () {
      return {
        inner: this.title
      }
    },
    meta: [
      // creates a meta description tag in header.
      { name: 'description', content: 'My description' }
    ]
  }
}
    Login or Signup to reply.
  4. 0

    I think you are talking about some external JS which are not part of node-modules and want to retrieve from external source (http://your-external-script) then you can go for dynamic loading of JS script tag. Put this code somewhere like you first landing screen of SPA in before transition event. 

    var script = document.createElement('script');
script.src = "htpps://your-external-script.js";
document.head.appendChild(script); //or something of the likes

    This will make your external file available in global scope and then you can use it anywhere.

    Note: this scenario is where you dont haev node-moduels for library or you dont want to put as load modules

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search