'VUE js head issue

Trying to figure out why this will not work from what i read on the vue-head component docs this is done correctly... i have it imported as a plugin in the main.js and then included whats needed in the vue file i'm in

<script>
export default {
head: {
  script: [
  {
    type: "text/javascript",
    src: "//cdn.leafletjs.com/leaflet-0.7.2/leaflet.js",
  },
  {
    type: "text/javascript",
    src: "//cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js",
  },
  {
    type: "text/javascript",
    src: "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js",
  },
  {
    type: "text/javascript",
    src: "//unpkg.com/[email protected]/dist/vue-range-slider.min.js",
  },
],
link: [
   {
    rel: "stylesheet",
    href:"https://fonts.googleapis.com/css2family=Quicksand:300,400,500,600,700",
  },
  {
    rel: "stylesheet",
    href: "//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css",
  },
  {
    rel: "stylesheet",
    href: "//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
  },
  {
    rel: "stylesheet",
    href: "//unpkg.com/[email protected]/assets/css/leaflet.css",
  },
  {
    rel: "stylesheet",
    href: "//cdn.leafletjs.com/leaflet-0.7.2/leaflet.css",
  },
  {
    rel: "stylesheet",
    href: "//cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri- 
  leaflet-geocoder.css",
  },
  {
    rel: "stylesheet",
    href: "//unpkg.com/[email protected]/dist/leaflet.css",
  },
  {
    rel: "stylesheet",
    href: "//unpkg.com/[email protected]/dist/MarkerCluster.css",
  },
  {
    rel: "stylesheet",
    href: "//unpkg.com/[email protected]/dist/MarkerCluster.Default.css",
  },
  {
    rel: "stylesheet",
    href: "//unpkg.com/[email protected]/dist/vue-range-slider.min.css",
  },

  ],
 },
};
</script>

but this does ... if i comment these imports out in the the style tag i lose access to the items -- i am trying to resolved lighthouse stating these are renderblocking items

<style lang="scss"  >
@import url("//fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap");

@import url("//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css");
 @import url("//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("//unpkg.com/[email protected]/assets/css/leaflet.css");
@import url("//cdn.leafletjs.com/leaflet-0.7.2/leaflet.css");
@import url("//cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.css");
@import url("//unpkg.com/[email protected]/dist/leaflet.css");
@import url("//unpkg.com/[email protected]/dist/MarkerCluster.css");
@import url("//unpkg.com/[email protected]/dist/MarkerCluster.Default.css");
@import url("//unpkg.com/[email protected]/dist/vue-range-slider.min.css");


@import url("//cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"); 
@import url("//cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js");
@import url("//cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.js");
@import url("//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js");
@import url("//unpkg.com/[email protected]/dist/vue-range-slider.min.js");
</style>
vue.js


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions