tessl/npm-nuxtjs--pwa

Zero config PWA solution for Nuxt.js applications with service worker management, manifest generation, and meta tag optimization

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Meta Tag Management

Name: tessl/npm-nuxtjs--pwa
Author: tessl

HTML meta tag generation for PWA compliance, SEO optimization, and social media integration with comprehensive support for mobile web app configuration.

Capabilities

Meta Tag Generation Function

Generates comprehensive HTML meta tags for PWA functionality and optimization.

/**
 * Generate PWA-compliant meta tags
 * @param nuxt - Nuxt instance
 * @param pwa - PWA context containing meta configuration
 * @param moduleContainer - Nuxt module container for plugins
 */
function meta(nuxt: any, pwa: PWAContext, moduleContainer: any): void;

interface MetaOptions extends Partial<ManifestOptions> {
  /** Character encoding (default: utf-8) */
  charset: string;
  /** Viewport meta content */
  viewport: string;
  /** Enable mobile web app capability */
  mobileApp: boolean;
  /** Enable iOS web app capability */
  mobileAppIOS: boolean;
  /** iOS status bar style */
  appleStatusBarStyle: string;
  /** Include favicon links */
  favicon: boolean;
  /** Application name */
  name: string;
  /** Deprecated: use name instead */
  title?: string;
  /** Author meta tag */
  author: string;
  /** Description meta tag */
  description: string;
  /** Theme color for browser UI */
  theme_color: string;
  /** Language code */
  lang: string;
  /** Open Graph type */
  ogType: string;
  /** Open Graph site name */
  ogSiteName: string | true;
  /** Open Graph title */
  ogTitle: string | true;
  /** Open Graph description */
  ogDescription: string | true;
  /** Open Graph host URL */
  ogHost: string | undefined;
  /** Open Graph image configuration */
  ogImage: boolean | string | OgImageObject;
  /** Open Graph URL */
  ogUrl: string | undefined | true;
  /** Twitter card type */
  twitterCard: string | undefined;
  /** Twitter site handle */
  twitterSite: string | undefined;
  /** Twitter creator handle */
  twitterCreator: string | undefined;
  /** Enable native UI optimizations */
  nativeUI: boolean;
}

interface OgImageObject {
  path?: string;
  width?: number;
  height?: number;
  type?: string;
}

Usage Example:

// nuxt.config.ts
export default {
  pwa: {
    meta: {
      name: 'My PWA Application',
      author: 'John Doe',
      description: 'A progressive web application',
      theme_color: '#2196f3',
      viewport: 'width=device-width, initial-scale=1',
      mobileApp: true,
      mobileAppIOS: true,
      ogType: 'website',
      ogImage: '/og-image.png',
      twitterCard: 'summary_large_image'
    }
  }
}

Core Meta Tags

Generates essential meta tags for web applications.

/**
 * Generate core HTML meta tags
 */
interface CoreMetaTags {
  /** Character encoding */
  charset: string;
  /** Viewport configuration */
  viewport: string;
  /** Application name/title */
  name: string;
  /** Author information */
  author: string;
  /** Page/app description */
  description: string;
  /** Theme color for browser UI */
  theme_color: string;
}

Generated meta tags:

<meta hid="charset" charset="utf-8">
<meta hid="viewport" name="viewport" content="width=device-width, initial-scale=1">
<meta hid="description" name="description" content="App description">
<meta hid="theme-color" name="theme-color" content="#2196f3">
<meta hid="author" name="author" content="Author Name">

Mobile Web App Configuration

Configures meta tags for mobile web app capabilities.

/**
 * Mobile web app meta tag configuration
 */
interface MobileAppConfig {
  /** Enable general mobile web app capability */
  mobileApp: boolean;
  /** Enable iOS-specific web app capability */
  mobileAppIOS: boolean;
  /** iOS status bar appearance */
  appleStatusBarStyle: 'default' | 'black' | 'black-translucent';
}

Generated mobile app meta tags:

<!-- General mobile web app -->
<meta hid="mobile-web-app-capable" name="mobile-web-app-capable" content="yes">

<!-- iOS-specific -->
<meta hid="apple-mobile-web-app-capable" name="apple-mobile-web-app-capable" content="yes">
<meta hid="apple-mobile-web-app-status-bar-style" name="apple-mobile-web-app-status-bar-style" content="default">
<meta hid="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content="App Name">

Icon and Favicon Management

Handles favicon and touch icon configuration.

/**
 * Icon configuration for meta tags
 */
interface IconMetaConfig {
  /** Enable favicon generation */
  favicon: boolean;
  /** Generated icons from icon module */
  icons: Array<{
    src: string;
    sizes: string;
    type: string;
  }>;
}

Generated icon links:

<!-- Favicon -->
<link hid="shortcut-icon" rel="shortcut icon" href="/icons/icon_64x64.png">

<!-- Apple touch icon -->
<link hid="apple-touch-icon" rel="apple-touch-icon" href="/icons/icon_512x512.png" sizes="512x512">

iOS Splash Screens

Generates iOS splash screen meta tags for different device sizes.

/**
 * iOS splash screen configuration
 */
interface IOSSplashConfig {
  /** Enable iOS splash screens */
  mobileAppIOS: boolean;
  /** Splash screen URLs by device type */
  _iosSplash: Record<string, string>;
}

Generated splash screen links:

<link href="/icons/splash_iphonex_1125x2436.png" 
      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" 
      rel="apple-touch-startup-image" 
      hid="apple-touch-startup-image-iphonex">

Open Graph Meta Tags

Comprehensive Open Graph meta tag support for social media sharing.

/**
 * Open Graph configuration
 */
interface OpenGraphConfig {
  /** Page type (website, article, etc.) */
  ogType: string;
  /** Site name */
  ogSiteName: string | true;
  /** Page title */
  ogTitle: string | true;
  /** Page description */
  ogDescription: string | true;
  /** Host URL for absolute URLs */
  ogHost: string | undefined;
  /** Image configuration */
  ogImage: boolean | string | OgImageObject;
  /** Canonical URL */
  ogUrl: string | undefined | true;
}

Generated Open Graph tags:

<meta hid="og:type" name="og:type" property="og:type" content="website">
<meta hid="og:title" name="og:title" property="og:title" content="Page Title">
<meta hid="og:description" name="og:description" property="og:description" content="Page description">
<meta hid="og:image" name="og:image" property="og:image" content="https://example.com/og-image.png">
<meta hid="og:url" name="og:url" property="og:url" content="https://example.com">

Twitter Card Meta Tags

Twitter card configuration for enhanced Twitter sharing.

/**
 * Twitter card configuration
 */
interface TwitterCardConfig {
  /** Card type (summary, summary_large_image, etc.) */
  twitterCard: string | undefined;
  /** Twitter site handle */
  twitterSite: string | undefined;
  /** Twitter creator handle */
  twitterCreator: string | undefined;
}

Generated Twitter meta tags:

<meta hid="twitter:card" name="twitter:card" property="twitter:card" content="summary_large_image">
<meta hid="twitter:site" name="twitter:site" property="twitter:site" content="@site_handle">
<meta hid="twitter:creator" name="twitter:creator" property="twitter:creator" content="@creator_handle">

Viewport Configuration

Flexible viewport meta tag configuration with native UI support.

/**
 * Viewport configuration options
 */
interface ViewportConfig {
  /** Custom viewport content or undefined for auto-generation */
  viewport: string | undefined;
  /** Enable native UI optimizations */
  nativeUI: boolean;
}

Viewport configurations:

// Standard viewport (default)
"width=device-width, initial-scale=1"

// Native UI optimized viewport
"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui"

Runtime Meta Integration

Provides runtime meta tag merging for SPA applications.

/**
 * Runtime meta loading for SPA mode
 * @param nuxt - Nuxt instance
 */
function metaRuntime(nuxt: any): void;

/**
 * Merge meta configurations
 * @param to - Target meta configuration
 * @param from - Source meta configuration to merge
 */
function mergeMeta(to: any, from: any): void;

Usage Example:

// Automatic runtime integration
// Called internally by meta module
metaRuntime(nuxt);

// Manual meta merging
const targetMeta = { meta: [], link: [] };
const sourceMeta = { 
  meta: [{ name: 'theme-color', content: '#2196f3' }],
  link: [{ rel: 'icon', href: '/icon.png' }]
};
mergeMeta(targetMeta, sourceMeta);

The runtime integration:

Loads meta.json file during SPA rendering from buildDir/pwa/meta.json
Merges meta tags into Nuxt head configuration using mergeMeta utility
Handles deduplication by hid and name attributes to prevent duplicate tags
Provides fallback for client-side rendering when SSR is not available
Hooks into render:resourcesLoaded event for proper timing

Language and Direction Support

Configures HTML language and text direction attributes.

/**
 * Language and direction configuration
 */
interface LanguageConfig {
  /** Primary language code */
  lang: string;
  /** Text direction (from manifest) */
  dir?: 'ltr' | 'rtl';
}

Applied to HTML element:

<html lang="en" dir="ltr">

Default Configuration

Provides comprehensive defaults with environment variable integration:

const defaults: MetaOptions = {
  name: process.env.npm_package_name,
  author: process.env.npm_package_author_name,
  description: process.env.npm_package_description,
  charset: 'utf-8',
  viewport: undefined, // Auto-generated based on nativeUI
  mobileApp: true,
  nativeUI: false,
  favicon: true,
  mobileAppIOS: undefined, // Auto-set based on nativeUI
  appleStatusBarStyle: undefined,
  theme_color: undefined,
  lang: 'en',
  ogType: 'website',
  ogSiteName: true,
  ogTitle: true,
  ogDescription: true,
  ogImage: true,
  ogHost: undefined,
  ogUrl: true,
  twitterCard: undefined,
  twitterSite: undefined,
  twitterCreator: undefined
};

Install with Tessl CLI