Injecting into <head> in Vue.js

前端未结

关注

 4  2045

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)
发布评论:

提交评论
- 加载中...
情话喂你

2021-01-03 22:34

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...

情书的邮戳

2021-01-03 22:38

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' }
    ]
  }
}

0 讨论(0)

庸人自扰

2021-01-03 22:48
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
0 讨论(0)
发布评论:

提交评论
- 加载中...