search

drunomics / nuxtjs-drupal-ce

A Nuxt module to easily connect Drupal via custom elements.
https://lupus-decoupled.org/
MIT License
24 stars 4 forks source link

Metatags component #141

Closed StirStudios closed 1 year ago

StirStudios commented 1 year ago

Here's an idea for a Metatags.vue component:

<template>
  <Head>
    <Title>{{ page.title }}</Title>
    <template v-for="item in page.metatags.meta">
      <Meta v-if="item.name" :name="item.name" :content="item.content" />
      <Meta
        v-if="item.property"
        :property="item.property"
        :content="item.content"
      />
    </template>
    <Link rel="canonical" :href="page.metatags.link[0].href" />
  </Head>
</template>

<script setup>
  const { getPage } = useDrupalCe();
  const page = getPage();
</script>

Works well on my dev and supports more metags out of the box.

StirStudios commented 1 year ago

Also I think we can remove the title from metatags json?

{
  "name": "title",
  "content": "Test | Nuxt"
},

We already have access to that from page.title.

TurtlBbx commented 1 year ago

@StirStudios Sorry for the late reply. I've added code for handling meta tags to playground (minimal example Nuxt app) with PR #143. It will get merged after review.

StirStudios commented 1 year ago

Great News!

fago commented 1 year ago

Please take a look and let us know if you have an issues with that!

StirStudios commented 1 year ago

This needs to be opened back up again as the schema is not being rendered and it is rendered as "page.value.metatags.meta" instead.

TurtlBbx commented 1 year ago

@StirStudios Please open a new issue with more details of the problem you are experiencing. This issue will stay closed.

StirStudios commented 1 year ago

@TurtlBbx already have added to Slack and Drupal. The Drupal module will need an update to accomodate this.