Meta tags management with Vue-meta in Vue.js 3

Provide code to dynamically manage meta tags for each route using the vue-meta plugin in Vue.js 3, enhancing SEO.

import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
import { createMetaManager, plugin as metaPlugin } from 'vue-meta';

// Define your routes for the application
const routes = [
  { 
    path: '/home', 
    component: Home, 
    meta: { 
      title: 'Home Page', 
      metaTags: [
        {
          name: 'description',
          content: 'This is the home page of our example app.'
        },
        {
          property: 'og:description',
          content: 'This is the home page of our example app.'
        }
      ]
    }
  },
  // ...other routes
];

// Create router instance
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// Create meta manager instance
const metaManager = createMetaManager();

// Create Vue app
const app = createApp(App);

// Use Vue-meta plugin
app.use(metaPlugin);

// Use the router
app.use(router);

// Use the meta manager
app.use(metaManager);

// Mount the app
app.mount('#app');

This code snippet sets up a Vue.js 3 application with vue-meta to manage meta tags for different routes. It imports necessary modules, defines routes with the respective meta tags for SEO, creates a new Vue app instance, and installs the vue-meta plugin along with the Vue router. It also shows how to define meta tags for each route, which are dynamically injected into the head of the document when the route is active. The app is then mounted to an element with the id 'app'.