В этом посте мы рассмотрим, как добавить vue-meta в наш проект и использовать его для обработки метаданных внутри компонента.

Что такое vue-meta?

Vue-meta - это модуль, который предлагает плагин Vue, который позволяет нам динамически добавлять метаданные из компонента.

Это означает, что в проектах, где у нас есть несколько маршрутов, и мы хотим динамически обновлять метатеги для SEO на основе маршрута, отображаемого в данный момент на странице, vue-meta будет обрабатывать это за нас, давая нам контроль над метаданными приложения.

Настраивать

Прежде всего, нам нужно добавить vue-meta в наш проект и сообщить Vue, что мы хотим использовать его как плагин, доступный для всех компонентов.

npm install vue-meta --save

Затем мы добавляем vue-meta в наш основной файл js.

// main.js or index.js
import Vue from "vue";
import App from "./App.vue"; // main component
import Meta from "vue-meta";
Vue.use(Meta);
new Vue({
  render: h => h(App)
}).$mount("#app");

Добавление метаданных

Теперь мы рассмотрим пример того, как добавить метаданные к нашему компоненту.

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld msg="Hello Vue in CodeSandbox!"/>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
  name: "App",
  components: {
    HelloWorld
  },
  metaInfo() {
    return {
      title: "test meta data with vue",
      meta: [
        {
          vmid: "description",
          name: "description",
          content:
            "hello world, this is an example of adding a description with vueMeta"
        }
      ]
    };
  }
};
</script>

Как видно, мы можем сделать это, вызвав функцию «metaInfo» и вернув объект как значение, которое будет содержать наши метаданные.

Кроме того, мы можем установить мета-значение динамически на основе некоторой логики, поскольку у нас есть доступ к нему на уровне компонента.

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld msg="Hello Vue in CodeSandbox!"/>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
  name: "App",
  components: {
    HelloWorld
  },
  metaInfo() {
    const a = "test";
    return {
      title: "test meta data with vue",
      meta: [
        ...(a === "test" && [
          {
            vmid: "description",
            name: "description",
            content:
              "hello world, this is an example of adding a description with vue-meta"
          }
        ])
      ]
    };
  }
};
</script>

Тип метаданных

Мы можем добавить более или менее любые необходимые метаданные с помощью плагина «vue-meta», будь то мета, заголовок, ссылка или скрипт.

Ниже мы увидим пример того, как добавить некоторые из этих метаданных.

<script>
import HelloWorld from "./components/HelloWorld";
export default {
  name: "App",
  components: {
    HelloWorld
  },
  metaInfo() {
    const a = "test";
    return {
      title: "test meta data with vue",
      meta: [
        ...(a === "test" && [
          {
            vmid: "description",
            name: "description",
            content:
              "hello world, this is an example of adding a description with vue-meta"
          }
        ])
      ],
			script: [
        { src: '<https://services.postcodeanywhere.co.uk/js/address-3.91.js>', async: true, defer: true, body: true }
      ],
			link: [
        {
          rel: 'canonical',
          href: '<https://malikgabroun.com/>'
        }
			]
    };
  }
};
</script>

В приведенном выше примере мы можем увидеть, как мы добавили внешний скрипт в тело, используя vue-meta. В случае, если мы хотели, чтобы сценарий был включен в голову, мы можем сделать это, удалив флаг тела.

Вмид

До сих пор мы изучали, как настроить vue-meta и динамически добавлять метаданные к нашему компоненту, однако что, если бы мы хотели установить значение для определенного свойства в нескольких компонентах и ​​как это можно было бы решить.

Для этого мы можем использовать vmid, которое является специальным свойством, которое vue-meta предоставляет нам для разрешения значения в дереве компонентов. Поэтому, если два набора мета имеют одинаковый vmid, он переопределит его, используя значение из последнего обновленного компонента (то есть дочернего компонента) вместо его объединения.

Заключение

В заключение, vue-meta - это плагин, который в большинстве фреймворков vue выходит из коробки, что позволяет нам и дает нам контроль над тем, как метаданные должны отображаться на веб-сайте.