🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vite-plugin-pages-metadata

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install
Package was removed
Sorry, it seems this package was removed from the registry

vite-plugin-pages-metadata

Build full production assets for better SEO and metadata integration.

1.0.1
unpublished
latest
Source
npm
Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

vite-plugin-pages-metadata

npm version monthly downloads types

unofficial vite-plugin-pages enhanced build

For use

Make sure you have the original plugin installed vite-plugin-pages for the route generation, everything is on us.

We highly recommend that you keep viewports, and favicons global while title, description, and keywords per-page. Right now the author meta are not yet supported. Please consider creating a pull request.

Getting Started

Installation process.

npm install -D vite-plugin-pages
npm install -D vite-plugin-pages-metadata

Index.html

No need to replace your title but make sure you have one it will be replaced with metadata and the new title. Here is an example of index.html located in the root directory.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/ico" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Project Name</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Vite config

Edit your vite.config.ts

import {
  routePlugin,
  generateRoutes,
  Route,
  createMetadata,
} from "vite-plugin-pages-metadata";
import react from "@vitejs/plugin-react";
import Pages from "vite-plugin-pages";
import { defineConfig } from "vite";

let routeArray: Route[] = [];

const pages: Route[] = [
  {
    path: "/",
    title: "My website",
    description: "This is my awesome website",
    keywords: ["Website", "Awesome"],
  },
  { path: "posts", title: "All posts" },
  { path: "*", title: "404" },
];

export default defineConfig(({ command }) => {
  return {
    plugins: [
      react(),
      Pages({
        // ...
        onRoutesGenerated() {
          generateRoutes(pages, (page) => {
            routeArray.push({
              path: page.path,
              ...(page && page.title && { title: page.title }),
              ...(page &&
                page.description && {
                  description: page.description,
                }),
            });
          });
          createMetadata(routeArray);
        },
      }),
      routePlugin({
        routeArray,
        outDir: "dist",
        command,
      }),
    ],
  };
});

Dynamic routes

// ...
import posts from "./src/api/posts";

let routeArray: Route[] = [];

posts.map((post) => {
  return routeArray.push({
    path: `/post/${post.id}`,
    title: post.title,
    description: post.summary,
  });
});

// ...

Fast Refresh Support

Edit src/main.tsx or your entry file.

import { MetadataProvider } from "vite-plugin-pages-metadata";
import { metadata } from "./metadata";
import routes from "~react-pages";
// ...

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <MetadataProvider metadata={metadata} routes={routes}>
        <App />
      </MetadataProvider>
    </BrowserRouter>
  </StrictMode>,
);

routeArray

  • Type: Route[] or { path: string; title: string; description?: string; }
  • Default: []

Connect your generated routes from vite-plugin-pages to the plugin.

outDir

  • Type: string
  • Default: dist

The name where your build assets are stored after a build.

License

MIT License © 2024 Nathaniel

Keywords

vite-plugin-pages
vite-plugin
metadata
react

FAQs

Package last updated on 26 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Malicious npm Packages Use Telegram to Exfiltrate BullX Credentials

Research

Security News

Malicious npm Packages Use Telegram to Exfiltrate BullX Credentials

Socket uncovers an npm Trojan stealing crypto wallets and BullX credentials via obfuscated code and Telegram exfiltration.

By Kush Pandya  -  May 08, 2025