vue-meta-tag-updater
Vue Meta Tag Updater for update meta tags in Vue Router
Installing
npm install vue-meta-tag-updater
About
Context. You are building a single page application (SPA) with vue.js and you need to make different meta tags on the pages.
Objective. We will add meta tags for the about page in our example.com project.
Usage with TypeScript
Step 1. Add your «about» route to the routes array.
import { RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
{
path: '/about',
name: 'about-view',
component: () => import('@/views/AboutView.vue'),
},
];
export default routes;
Step 2. Next step will be add meta to the metas array.
import IRouteMeta from 'vue-meta-tag-updater/src/types/IRouteMeta';
const metas: Array<IRouteMeta> = [
{
path: '/about',
meta: {
title: 'Wavelovers – About',
metaTags: [
{
name: 'keywords',
content: 'example.com, about page, other keywords',
},
{
name: 'description',
content: 'example.com has what you need',
},
],
linkTags: [
{
rel: 'canonical',
href: 'https://example.com/about',
},
],
},
},
];
export default metas;
Step 3. Open router index file, and add call MetaTagUpdater.update after router init and before export router .
import {
createRouter, createWebHistory,
NavigationGuardNext, RouteLocationNormalized
} from 'vue-router';
import MetaTagUpdater from 'vue-meta-tag-updater';
import routes from '@/router/assets/routes';
import metas from '@/router/assets/metas';
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
router.beforeEach((
to: RouteLocationNormalized,
from: RouteLocationNormalized,
next: NavigationGuardNext,
) => {
MetaTagUpdater.update(to, from, next, metas);
});
export default router;
Step 4. You may need to add an entry to the declaration file, for example 'modules.d.ts'.
declare module 'vue-meta-tag-updater';
Types
There are three types. IRouteMeta for all metas array.
import IRouteMeta from 'vue-meta-tag-updater/src/types/IRouteMeta';
IMeta for meta in metas array.
import IMeta from 'vue-meta-tag-updater/src/types/IMeta';
ITag for metaTags and linkTags in meta.
import ITag from 'vue-meta-tag-updater/src/types/ITag';