Incompatible with google fonts through head.link?

[kirillbunin]

I'm using nuxt v1.4.0 and nuxt-rfg-icon v0.4.1.
In my nuxt.config.js i have the following:

head: {
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:400,500&subset=latin-ext' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Rubik:400,500,700&subset=latin-ext' }
    ]
  },

which for some reason compiles to:

<link data-n-head="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500&amp;amp;subset=latin-ext" sizes="180x180"/>
<link data-n-head="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,500,700&amp;amp;subset=latin-ext" type="image/png" sizes="32x32"/>

which browsers take as invalid and therefore don't load the styles. I looked into main.js of the plugin, but tbh, I have no idea where this happens. Any help appreciated.

// Edit:
I realise the title is little bit misleading, since it is not as much about compability, as much as the plugin takes existink links and works with them, I guess?

// Edit2:
I upgraded to nuxt 1.4.0 from 1.0.0, thinking it might resolve things. So I don't think it's version related issue

[pimlie]

If you add unique hid parameters for your google font stylesheets in nuxt.config.js this issue should be solved. hid is the name Nuxt uses as tagIDKeyName for vue-meta. It seems vue-meta is not really critical at what existing tags it uses to overwrite tags instead of append.

Maybe I can also fix this permantnly by adding hid parameters to the headers in header.json, but I will check that later this week :)

[kirillbunin]

I tried adding hid but to to no avail!

<link data-n-head="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500&amp;amp;subset=latin-ext" data-hid="googleFontRoboto" sizes="180x180"/>
<link data-n-head="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,500,700&amp;amp;subset=latin-ext" data-hid="googleFontRubik" type="image/png" sizes="32x32"/>

[pimlie]

Hmm, thats strange. Good thing I put should in italic then!

But unfortunately I am unable to reproduce this issue myself. Could maybe create a small reproduction repo I can check?

Eg this is my output:

<link data-n-head="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500&amp;amp;subset=latin-ext"/><link data-n-head="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,500,700&amp;amp;subset=latin-ext"/><link data-n-head="true" rel="manifest" href="/_nuxt/manifest.json"/><link data-n-head="true" rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"/><link data-n-head="true" rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png"/><link data-n-head="true" rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png"/>

[kirillbunin]

I created this repo, tried and tested, it reproduces the issue for me
https://github.com/kirillbunin/nuxt-rfg-icon-test

[pimlie]

@kirillbunin Thanks for the repo. The reason why I didnt got this issue because I used static: true in my test project. There are 2 separate code paths which can add the headers to the nuxt options object and one of the code paths used defaultsDeep to add the headers. That is not correct as defaultsDeep is not really critical (so it wasnt vue-meta after all).

I just released v0.4.2 which should fix this issue, could you please test this and let me know?

[kirillbunin]

Works like a charm! Thanks once again!))