В этом посте мы рассмотрим, как добавить 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 выходит из коробки, что позволяет нам и дает нам контроль над тем, как метаданные должны отображаться на веб-сайте.