Vite Plugin Meta Tags

0.1.4 verified Mon Apr 27 auth: no javascript

A Vite plugin (v0.1.4) that automatically injects meta tags (title, description, Open Graph, Twitter Card, theme color) into your index.html. It is lightweight, ships TypeScript types, and supports custom tags and environment variable integration. Active development with rapid releases. Differentiator: focused solely on meta injection with zero-config defaults for common SEO tags, unlike broader HTML-transform plugins.

Common errors

error Error: 'meta' is not exported from 'vite-plugin-meta-tags' ↓

cause Using a CommonJS require() on an ESM-only package, or using a bundler that cannot resolve named exports from ESM.

fix

Use ES module imports: import { meta } from 'vite-plugin-meta-tags'. Add '"type": "module"' to package.json if needed.

error Cannot read properties of undefined (reading 'meta') ↓

cause Missing or incorrect Vite plugin configuration (e.g., not wrapping meta() in an array or missing import).

fix

Ensure import { meta } from 'vite-plugin-meta-tags' is at the top of your vite.config and use plugins: [meta({...})].

Warnings

deprecated The `enfore` and `transform` options were deprecated in v0.1.4. ↓

fix Upgrade to v0.1.4 or later; remove these options from your config.

gotcha If you don't set `type: "module"` in package.json, you may get a 'change to a dynamic import()' error when importing the plugin. ↓

fix Add '"type": "module"' to your package.json, or use a .mjs extension for your config file.

breaking In v0.1.2, custom tags ordering changed: custom tags are now appended first (before default tags). ↓

fix If you relied on custom tags being last, update your tag order logic after upgrading to v0.1.2+.

Install

npm install vite-plugin-meta-tags

yarn add vite-plugin-meta-tags

pnpm add vite-plugin-meta-tags

Imports

meta
wrong
```
const meta = require('vite-plugin-meta-tags')
```
correct
```
import { meta } from 'vite-plugin-meta-tags'
```
Named export; also ESM-only (package has no CJS export). Using require() will fail.
MetaInput
```
import type { MetaInput } from 'vite-plugin-meta-tags'
```
TypeScript users can import the options type for type safety.

meta (default import)

wrong

import { meta as defaultMeta } from 'vite-plugin-meta-tags'

correct

import meta from 'vite-plugin-meta-tags'

Default import also works (resolves to the same named export).

Quickstart

Basic usage: configure meta tags in vite.config.ts. Plugin injects title, meta description, Open Graph, Twitter Card, and theme color tags.

import { defineConfig } from 'vite';
import { meta } from 'vite-plugin-meta-tags';

export default defineConfig({
  plugins: [
    meta({
      title: 'My App',
      description: 'A description of my app',
      url: 'https://example.com',
      img: '/og-image.png',
      color: '#663399',
    }),
  ],
});