Gridsome

Gridsome is a Vue-based static site generator powered by GraphQL. It outputs a fully static site to dist/ by default. pageflare integrates as a post-build step via npm scripts.

Install

npm install -D @pageflare/cli

Usage

Chain pageflare after gridsome build in your npm scripts:

{
  "scripts": {
    "build": "gridsome build && pageflare dist/ --in-place"
  }
}

Configuration

Create a pageflare.jsonc in your project root:

{
  "minify_html": true,
  "minify_css": true,
  "minify_js": true,
  "js_defer": true,
  "lazy_images": true,
  "img_dimensions": true,
  "font_swap": true,
  "preconnect_hints": true
}

What pageflare Adds

Gridsome handles image processing via g-image and minifies JS/CSS via webpack, but does not optimize the final HTML output. pageflare adds:

HTML minification
Lazy loading for images not using g-image
JavaScript defer and loader injection
Font display swap and self-hosting
Preconnect hints for third-party origins
Critical CSS extraction (Pro)
Responsive image srcset generation (Pro)

CI/CD Integration

GitHub Actions

- name: Build Gridsome
  run: gridsome build

- name: Optimize with pageflare
  uses: getappz/pageflare-cli@v1
  with:
    args: "dist/ --in-place"

Netlify

[build]
  command = "gridsome build && pageflare dist/ --in-place --no-progress"
  publish = "dist"

Vercel

{
  "buildCommand": "gridsome build && pageflare dist/ --in-place --no-progress"
}

Replacing plugins

Gridsome has built-in image optimization via @gridsome/plugin-image. After adding pageflare:

Feature / Plugin	pageflare equivalent
`gridsome-plugin-sitemap` / `@gridsome/plugin-sitemap`	Sitemap generation via `llm.sitemap` config
Third-party minification plugins	HTML, CSS, JS minification

Pro License

Set the PAGEFLARE_LICENSE environment variable to unlock Pro optimizations:

PAGEFLARE_LICENSE=your-key npm run build

Deploying

Gridsome static output works with any hosting provider:

Vercel — automatic Vercel Image Optimization
Netlify — automatic Netlify Image CDN
Cloudflare Pages — Cloudflare Image Resizing
Self-hosted — any static file server

Troubleshooting

JS defer breaks client-side navigation Gridsome uses Vue Router for client-side routing. If deferred scripts interfere with page transitions, disable JS deferral:

{ "js_defer": false }

Duplicate image optimization If you use Gridsome’s g-image component, images already have lazy loading and srcset. pageflare skips images that already have these attributes. The two work safely together.

pageflare processes 0 files Verify the output directory — Gridsome defaults to dist/. Check that the build completed successfully before pageflare runs.