Plugin meta with vueUse/head

[kleinpetr]

Hi,

I am trying to enable meta() plugin as a builder for the Markdown plugin, but nothing happened.
I am trying to change title and layout as route meta prop, but neither of them work

this is my config

Markdown({
      // headEnabled: true,
      exposeFrontmatter: true,
      markdownItOptions: {
        html: true,
        breaks: true,
        typographer: true,
      },
      markdownItSetup(md) {
        md.use(Prism)
        md.use(LinkAttributes, {
          matcher: (link: string) => /^https?:\/\//.test(link),
          attrs: {
            target: '_blank',
            rel: 'noopener',
          },
        })
      },
      builders: [meta()],
    })

I also use vueUse/head plugin, so maybe it could rewrite this behavior?

[yankeeinlondon]

@kleinpetr to better understand what you're doing can you please provide a reproducible example with a playground? Use of Head is great but there is some nuance ... and there is a bug fix that is about to be released.

[kleinpetr]

Yep, for example you can look here https://github.com/kleinpetr/meta-test

I've added meta() plugin which should use attribute layout from frontmatter by default, so in about.md I've set test layout, but it doesn't work.

Also I've disabled the headEnabled property, and the title is just Vitesse.

[yankeeinlondon]

Ok, so here's where we are with that ... this one is near and dear to my heart as i'd really like a simple, out-of-the-box way to switch layouts ... I just pushed a PR a moment ago which has some fixes on this. It now definitely puts the custom route into the SFC component when you use layout so there's a much better chance this will just work for you once released to npm (I'm sure @antfu) will probably do this in next day or two.

There is a behavior, however, that I'm still trying to track down that might still be an inpediment. It's a bit baffling actually because if you manually put the same <route> HTML into the SFC manually on the page it works and my tests show that the meta() builder produces identical HTML but somehow there is some inconsistency that is taking place which interferes -- never in my unit tests -- but maybe in the SFC to VueJS transpilation step.

Either way, please keep an eye out for this new release and I'm keen to hear whether it works for you.

[yankeeinlondon]

Also side note, but looking at your use of LinkAttributes you might want to consider switching over to the link builder. Should do everything that MDI plugin does and whole lot more.

[kleinpetr]

Ok, thank you :) I will try it once there is an update.

Also side note, but looking at your use of LinkAttributes you might want to consider switching over to the link builder. Should do everything that MDI plugin does and whole lot more.

Nice, it works really well, probably it could be use in the Vitesse template itself, what do you think @antfu?

[yankeeinlondon]

the latest npm version has the fixes in it; can you give it a try and let me know if this can be closed?

[yankeeinlondon]

Note: I have made another change in a local branch that definitely fixes this and doesn't have any dependency on use of the vite-plugin-pages (though works with it just fine). I will release it in the next week and post here while closing the issue.

[yankeeinlondon]

fixed in v0.16.0