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 state 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 metadata in your defineComponent script block:

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

In this example:

<title> becomes page.meta.title
name="author" becomes page.meta.author
name="description" becomes 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 state using the data block:

  export default defineComponent({
    async data(context) {
      return {
        // Map the page meta title to a flat state 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 state 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.

Metadata Plugin

Start Building with Coralite!