vite-plugin-pages-metadata
v1.0.1
Published
Build full production assets for better SEO and metadata integration.
Downloads
526
Maintainers
nathanielrzReadme
vite-plugin-pages-metadata
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-metadataIndex.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