Metadata Plugin

The metadata plugin is a built-in Coralite tool that extracts metadata from <title> and <meta> tags in your page's <head> and makes them available in the context.page.meta object.

Basic Usage #

The plugin automatically scans the <head> section of your pages for <title> and <meta> tags. These properties are exposed to your component scripts via context.page.meta.

Defining Metadata #

Define your metadata in the page HTML:

<!-- index.html -->

<html lang="en">
<head>
  <title>My Awesome Page</title>
  <meta name="description" content="This is a description of my page."></meta>
  <meta name="author" content="Coralite Team"></meta>
</head>
<body>
  <page-header></page-header>
  <!-- ... -->
</body>
</html>

Accessing Metadata in Scripts #

Access the properties in your defineComponent script block:

  export default defineComponent({
    script (context) {
      console.log('Page Title:', context.page.meta.title);
      console.log('Description:', context.page.meta.description);
    }
  })

In this example:

<title> becomes context.page.meta.title
name="author" becomes context.page.meta.author
name="description" becomes context.page.meta.description

Dynamic Metadata #

The metadata plugin can also process components placed inside the <head>. This is useful for creating reusable SEO components or dynamic metadata bundles.

<!-- seo-bundle component -->
<template id="seo-bundle">
  <meta name="robots" content="index, follow"></meta>
  <meta name="theme-color" content="#ffffff"></meta>
  <meta name="generator" content="Coralite"></meta>
</template>

<!-- Page usage -->

<html>
<head>
  <seo-bundle></seo-bundle>
  <meta name="page-specific" content="value"></meta>
</head>
<body>
  <!-- ... -->
</body>
</html>

The plugin will render the <seo-bundle> component and extract any <meta> tags it produces.

Accessing in Templates #

Coralite templates are "dumb" and cannot access the page object directly. To render metadata in your HTML template, you must explicitly map it to your component's properties in the server-side block:

  export default defineComponent({
    properties: async (context) => {
      return {
        // Map the page meta title to a flat property key
        pageTitle: context.page.meta.title
      }
    }
  })

<template id="page-header">
  <h1>{{ pageTitle }}</h1>
</template>

Key Points #

Built-in: Included by default in Coralite.
Namespace: All properties are stored in context.page.meta.
Extraction: Processes <title> and <meta name="..." content="...">.
Execution: Runs at build time during the onPageSet and onPageUpdate lifecycle hooks.