Metadata

The vite-plugin-vanjs plugin provides metadata management via the exported @vanjs/meta module. This module works with both SSR and CSR, and is very easy to work with.

Generally very easy to setup the system properly, we only need to make sure that we execute functions in a specific order:

• first we define a set of default tags to be used by both client and server (if using an SSR setup) on all pages that don't come with any metadata tags;
• next, on other pages, we define tags that override both the existing and the default tags.

App Global Tags

Here's a quick example, first let's start again with the src/app.ts:

import van from 'vanjs-core'
import { Title, Link, Meta, Style, Script } from "@vanjs/meta";

function App() {
  const { div, h1, p } = van.tags;

  // a good practice is to define some default tags
  // they are used on pages where no tags are set
  Title("VanJS + Vite App");
  Meta({ name: "description", content: "Sample app description" });
  Meta({ property: "og:description", content: "Some open graph description for your app" });
  Link({ href: 'path-to/your-style.css', rel: "stylesheet" });
  Script({ src: 'path-to/your-script.js' });
  Style({ id: "app-style" },
    `p { margin-bottom: 1rem }`
  );

  return div(
    h1('Hello VanJS!'),
    p('Sample paragraph.')
  );
}

// render or hydrate the app
van.add(document.body, App());

Page Tags

When using the router, tags defined in your pages can look like this:

// pages/about.ts
import van from 'vanjs-core'
import { Title, Meta } from '@vanjs/meta'

export function Page() {
  const { div, h1, p } = van.tags;
  // override default metadata for this page
  Title("About Us | VanJS + Vite App");
  Meta({ name: "description", content: "Learn more about VanJS" });
  Meta({ property: "og:description", content: "About VanJS and its contributors" });

  return div(
    h1("About Us"),
    p("The story started...")
  );
}

Notes

• both Style and Script are intended to be used for static assets, usually fonts, analytics, etc;
• the Style component doesn't have any unique attribute so we must use a unique ID to prevent duplicates;
• when JSX is enabled, you can use the same workflow, no need to include these meta tags in your JSX markup;
• when the user lands on a page without any meta tags, the app global tags will be used;
• all provided metadata components don't return any markup, their function is to register new tags or update existing ones.