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

Step 1. Add your «about» route to the routes array.

1import type { RouteRecordRaw } from 'vue-router';
2
3const routes: Array<RouteRecordRaw> = [
4  {
5    path: '/about',
6    name: 'about-view',
7    component: () => import('@/views/AboutView.vue'),
8  },
9];
10
11export default routes;

Step 2. Next step will be add meta to the metas array.

1const metas = [
2  {
3    path: '/about',
4    meta: {
5      title: 'About Page',
6      metaTags: [
7        {
8          name: 'keywords',
9          content: 'example.com, about page, other keywords',
10        },
11        {
12          name: 'description',
13          content: 'example.com has what you need',
14        },
15      ],
16      linkTags: [
17        {
18          rel: 'canonical',
19          href: 'https://example.com/about',
20        },
21      ],
22    },
23  },
24];
25
26export default metas;

Step 3. Open router index file, and add call MetaTagUpdater.update after router init and before export router .

1import { createRouter, createWebHistory } from 'vue-router';
2import MetaTagUpdater from 'vue-meta-tag-updater';
3import routes from '@/router/assets/routes';
4import metas from '@/router/assets/metas';
5
6import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router';
7
8const router = createRouter({
9  history: createWebHistory(process.env.BASE_URL),
10  routes,
11});
12
13router.beforeEach(
14  (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
15    MetaTagUpdater.update(to, from, next, metas);
16  },
17);
18
19export default router;