v-font and custom head

When a v-font directive is called in a component with a custom head, the directive specific head settings must be applied in the head.

The method this.$speedkit.head(headAddition) is provided, it queries the required head settings and returns them.

By passing the headAddition argument, additional head settings can be applied.

$speedkit.head() is only available in vue component scope.


  <span v-font="$getFont(…)"></span>

  export default {
    head () {
      return this.$speedkit.head({
        link: [],
        style: [],
        noscript: [
          { hid: 'critical-css', innerHTML: '<style> … </style>' }
        __dangerouslyDisableSanitizers: [


Browser compatibility

You can use nuxt-speedkit with Internet Explorer 11 browser.

Note that there is no optimization based on preloads in IE 11.

You need the following polyfills:

The PostCSS Plugin postcss-object-fit-images and following build.transpile entries for @nuxt/image:

  • @nuxt/image
  • image-meta

For the polyfills, it is recommended to integrate them as a plugin, polyfills loading must follow a specific order.

You can see a example with live demo at Nuxt Speedkit Example.


async function polyfills (){

  if (!('IntersectionObserver' in global)) {
    await import('intersection-observer');

  if (!('objectFit' in {
    await import('object-fit-images');

  if (!('HTMLPictureElement' in global || 'picturefill' in global)) {
    await import('picturefill');
    await import('picturefill/dist/plugins/mutation/pf.mutation.js');


polyfills ();

  build: {
    transpile: ['@nuxt/image', 'image-meta'],

    postcss: {
      plugins: {
        'postcss-object-fit-images': {}

  plugins: [
    { src: "@/plugins/polyfills.js", mode: "client" }

Use latest @nuxt/image version

In case the latest @nuxt/image version is needed, the following modifications can be made in the package.json:

  "overrides": {
    "nuxt-speedkit": {
      "@nuxt/image": "latest"
    "@nuxt/image": {
      "ipx": "0.8.1"

An older IPX version is needed because of the Issues:

Edit this page on GitHub Updated at Mon, Sep 26, 2022