Skip to content

nuxt support - #97

Merged
GreatAuk merged 10 commits into
mainfrom
feat/nuxt-support
Jun 22, 2026
Merged

nuxt support#97
GreatAuk merged 10 commits into
mainfrom
feat/nuxt-support

Conversation

@GreatAuk

@GreatAuk GreatAuk commented Jun 22, 2026

Copy link
Copy Markdown
Owner

Summary by CodeRabbit

发布说明

  • 新功能

    • 新增 Nuxt 3+ 框架支持,覆盖 SSG、SPA 及 SSR 三种部署模式
  • 文档

    • 更新主 README 和中文版本,新增 Nuxt 安装与使用指南
    • 新增 Nuxt 模块实现计划与设计文档
    • 新增 Nuxt 完整示例项目,包含端到端测试覆盖

GreatAuk and others added 10 commits June 22, 2026 13:47
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Implements the Nuxt module setup() logic: resolves the build version,
injects the detection script/stylesheet via nuxt.options.app.head, adds
the notification anchor through Nitro's render:html hook, and writes the
version.json/inject.js/inject.css assets into Nitro's publicDir on
nitro:build:public-assets. Disabled in dev and when no version resolves.

Nitro's nitro:init/nitro:build:public-assets/render:html hooks are only
typed via @nuxt/nitro-server (Nuxt 3.20+ only), so this casts nuxt.hook/
nitro.hooks.hook locally against nitropack/types and nuxt/app instead of
depending on that package or augmenting NuxtHooks/NitroHooks globally —
augmenting those types pulled webpack/postcss/etc. into the published
.d.mts. Added @nuxt/schema and nitropack as devDependencies (needed to
resolve the NuxtConfig/NuxtOptions augmentation and the Nitro type import
under pnpm's strict isolation) and marked @nuxt/schema as deps.neverBundle
in tsdown.config.ts to keep dist/index.d.mts small.
The render:html hook signature includes a second parameter (context with H3Event),
but the cast type only declared the first parameter. Updated the cast to include
the second parameter as optional with unknown type to match the real signature
without introducing new dependencies. Also clarified in the comment that this is
an intentionally narrowed local type to keep the package's .d.ts slim.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…of build-time nitro

The previous implementation hooked `nitro:init` and registered `render:html`
on that build-time `nitro` Hookable object. That hook target never receives
HTML render requests, so the notification anchor `<div>` was silently never
injected into the response body in SSR, SSG, or SPA output. `render:html` is
only ever called on the runtime `nitroApp` instance created when the compiled
server starts. Switch to generating a Nitro server plugin via `addTemplate` +
`addServerPlugin`, which runs against the real runtime `nitroApp`.
…tion/nuxt

Wire the nuxt module into example/nuxt and add Playwright e2e coverage for
all three rendering modes (SSR via nuxt build/preview, SSG via nuxt
generate, SPA via NUXT_SSR=false build/preview). Each mode runs the same
shared assertion suite covering raw HTML injection, the version.json
endpoint, the notification anchor in the DOM, and the update/dismiss
interaction flow. nuxi preview doesn't support a custom nitro output dir,
so the three modes build/serve sequentially against the shared default
.output dir and port 3000. Not wired into CI, matching the existing
vue-vite3 e2e suite which is also run manually only.
@coderabbitai

coderabbitai Bot commented Jun 22, 2026

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 79d8ec9d-2fa6-44bc-8abd-c65a1b19eccf

📥 Commits

Reviewing files that changed from the base of the PR and between e4fc280 and 6f103d0.

⛔ Files ignored due to path filters (2)
  • example/nuxt/public/favicon.ico is excluded by !**/*.ico
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (21)
  • README.md
  • README.zh-CN.md
  • docs/superpowers/plans/2026-06-22-nuxt-support.md
  • docs/superpowers/specs/2026-06-22-nuxt-support-design.md
  • example/nuxt/.gitignore
  • example/nuxt/README.md
  • example/nuxt/app/app.vue
  • example/nuxt/nuxt.config.ts
  • example/nuxt/package.json
  • example/nuxt/playwright.config.ts
  • example/nuxt/public/robots.txt
  • example/nuxt/tests/e2e/shared.ts
  • example/nuxt/tests/e2e/spa.spec.ts
  • example/nuxt/tests/e2e/ssg.spec.ts
  • example/nuxt/tests/e2e/ssr.spec.ts
  • example/nuxt/tsconfig.json
  • package.json
  • packages/nuxt/README.md
  • packages/nuxt/package.json
  • packages/nuxt/src/index.ts
  • packages/nuxt/tsdown.config.ts

概要

plugin-web-update-notification 新增独立 Nuxt 子包 @plugin-web-update-notification/nuxt,以 Nuxt Module 形式实现生产构建时注入检测脚本/样式与 version.json,覆盖 SSG/SPA/SSR 三种模式,并附带示例应用及 Playwright E2E 测试。

变更

Nuxt 支持全链路

层级 / 文件 说明
包清单与构建配置
packages/nuxt/package.json, packages/nuxt/tsdown.config.ts
定义 @plugin-web-update-notification/nuxt 的 ESM 包元信息、入口点、对 core 与 Nuxt 的依赖声明;tsdown 配置输出 ESM + dts,@nuxt/schema 不打包内联。
Nuxt Module 主体实现
packages/nuxt/src/index.ts
实现 defineNuxtModule:仅生产构建生效;读取 core 注入源码计算内容哈希;向 app.head 追加 script/link;通过 Nitro render:html 钩子向 body 注入通知锚点;在 nitro:build:public-assets 阶段将 version.json/JS/CSS 写入 publicDir;声明合并扩展 NuxtConfig/NuxtOptions 类型。
示例应用配置与根脚本接入
example/nuxt/nuxt.config.ts, example/nuxt/app/app.vue, example/nuxt/package.json, example/nuxt/playwright.config.ts, example/nuxt/tsconfig.json, example/nuxt/.gitignore, example/nuxt/public/robots.txt, package.json
新增完整 Nuxt 示例项目骨架,配置 webUpdateNotification 选项;Playwright 按 SSR/SPA/SSG 配置三个测试项目;根 package.json 补充 dev:nuxtexample:nuxt 脚本。
Playwright E2E 测试套件
example/nuxt/tests/e2e/shared.ts, example/nuxt/tests/e2e/ssr.spec.ts, example/nuxt/tests/e2e/spa.spec.ts, example/nuxt/tests/e2e/ssg.spec.ts
共享函数 registerCoreInjectionSuite 覆盖注入资源断言、version.json 校验、DOM 锚点检查、通知出现/消失(含版本拦截与 dismiss 点击);三个入口文件分别注册对应渲染模式的测试套件。
文档与 README 同步
packages/nuxt/README.md, README.md, README.zh-CN.md, example/nuxt/README.md, docs/superpowers/specs/..., docs/superpowers/plans/...
子包 README 给出安装与配置示例;根 README(中英文)新增 Nuxt 安装命令、Usage 链接与 Nuxt 配置段落;新增设计文档与实现计划文档。

序列图

sequenceDiagram
  participant NuxtBuild as Nuxt 生产构建
  participant Module as Nuxt Module setup()
  participant Core as `@plugin-web-update-notification/core`
  participant AppHead as app.head
  participant NitroHook as Nitro render:html 钩子
  participant PublicDir as publicDir

  NuxtBuild->>Module: 调用 setup(options, nuxt)
  Module->>Core: 读取 inject.js / inject.css 源码
  Core-->>Module: 返回脚本与样式内容
  Module->>Module: 生成版本号 + 计算内容哈希文件名
  Module->>AppHead: 注入 script tag(data-id, data-v)+ link tag
  Module->>NitroHook: 注册 render:html 钩子(通过 addTemplate)
  NuxtBuild->>NitroHook: 渲染 HTML 时触发
  NitroHook->>NitroHook: 向 bodyAppend 追加通知锚点 div
  NuxtBuild->>Module: 触发 nitro:build:public-assets
  Module->>PublicDir: 写入 version.json、inject.[hash].js、inject.[hash].css
Loading

代码审查工作量估算

🎯 4 (Complex) | ⏱️ ~60 minutes

小诗

🐰 兔子蹦蹦跳,Nuxt 支持来报到,
SSG、SPA、SSR 三路齐跑,
版本哈希算一算,注入脚本悄悄飘,
Nitro 钩子挂一挂,通知锚点稳稳靠,
E2E 测试一二三,构建成功乐陶陶!✨

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/nuxt-support

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@GreatAuk
GreatAuk merged commit 8ee094e into main Jun 22, 2026
0 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant