@barzhsieh/nuxt-content-mermaid 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +22 -4
  2. package/README.zh-TW.md +22 -4
  3. package/dist/module.json +2 -2
  4. package/dist/module.mjs +1 -1
  5. package/dist/runtime/components/Mermaid.vue +1 -0
  6. package/package.json +32 -20
package/README.md CHANGED
@@ -9,7 +9,8 @@
9
9
  [![Mermaid](https://img.shields.io/badge/mermaid-11.x-0f5b9d?logo=mermaid)](https://mermaid.js.org/)
10
10
  [![Nuxt Content](https://img.shields.io/badge/Nuxt%20Content-3.x-00DC82?logo=nuxt.js)](https://content.nuxt.com/)
11
11
 
12
- A Nuxt module designed for integrating Mermaid with `@nuxt/content`. It automatically converts `mermaid` code blocks in Markdown into responsive chart components, and supports lazy loading and dark/light theme switching.
12
+ A Nuxt module designed for integrating [**Mermaid**](https://mermaid.js.org/) with [**Nuxt Content v3**](https://content.nuxt.com/docs/getting-started).
13
+ It automatically converts `mermaid` code blocks in Markdown into responsive chart components, and supports lazy loading and dark/light theme switching.
13
14
 
14
15
  ## Features
15
16
 
@@ -21,20 +22,37 @@ A Nuxt module designed for integrating Mermaid with `@nuxt/content`. It automati
21
22
 
22
23
  ## Requirements
23
24
 
24
- - Nuxt 4 (`nuxt@^4.0.0`)
25
- - `@nuxt/content@^3.8.0`
25
+ - Nuxt 3.19+ or 4.1+ (`nuxt@^3.20.1 || ^4.1.0`)
26
+ - `@nuxt/content@>=3.5.0`
26
27
 
27
28
  ## Quick Setup
28
29
 
29
30
  ### 1. Install the module
30
31
 
32
+ **Auto-setup (adds to `modules` automatically):**
33
+
31
34
  ```bash
32
35
  npx nuxi module add @barzhsieh/nuxt-content-mermaid
33
36
  ```
34
37
 
38
+ > Nuxt CLI installs third-party modules as regular `dependencies` by default. If you prefer `devDependencies`, move it after install or use the manual option below.
39
+
40
+ **Install as dev dependency (manual modules entry):**
41
+
42
+ ```bash
43
+ # pnpm
44
+ pnpm add -D @barzhsieh/nuxt-content-mermaid
45
+
46
+ # npm
47
+ npm install -D @barzhsieh/nuxt-content-mermaid
48
+
49
+ # yarn
50
+ yarn add -D @barzhsieh/nuxt-content-mermaid
51
+ ```
52
+
35
53
  ### 2. Configure `nuxt.config.ts`
36
54
 
37
- Make sure the module is included in the `modules` array (if you used `nuxi module add`, this is added automatically):
55
+ Make sure the module is included in the `modules` array (skip if you used `nuxi module add`):
38
56
 
39
57
  ```ts
40
58
  export default defineNuxtConfig({
package/README.zh-TW.md CHANGED
@@ -9,7 +9,8 @@
9
9
  [![Mermaid](https://img.shields.io/badge/mermaid-11.x-0f5b9d?logo=mermaid)](https://mermaid.js.org/)
10
10
  [![Nuxt Content](https://img.shields.io/badge/Nuxt%20Content-3.x-00DC82?logo=nuxt.js)](https://content.nuxt.com/)
11
11
 
12
- 專為 Nuxt + `@nuxt/content` 設計的 Mermaid 整合模組。能自動將 Markdown 中的 ```mermaid 區塊轉換為響應式的圖表元件，並支援 Lazy Loading 與深色模式切換。
12
+ 專為 [**Nuxt Content v3**](https://content.nuxt.com/docs/getting-started) 整合 [**Mermaid**](https://mermaid.js.org/) 的模組。
13
+ 能自動將 Markdown 中的 ```mermaid 區塊轉換為響應式的圖表元件，並支援 Lazy Loading 與深色模式切換。
13
14
 
14
15
  ## Features
15
16
 
@@ -21,20 +22,37 @@
21
22
 
22
23
  ## 使用前提
23
24
 
24
- - Nuxt 4 (`nuxt@^4.0.0`)
25
- - `@nuxt/content@^3.8.0`（必須安裝）
25
+ - Nuxt 3.19 以上或 4.1 以上（`nuxt@^3.20.1 || ^4.1.0`）
26
+ - `@nuxt/content@>=3.5.0`
26
27
 
27
28
  ## Quick Setup
28
29
 
29
30
  ### 1. 安裝模組
30
31
 
32
+ **自動設定（自動寫入 `modules`）：**
33
+
31
34
  ```bash
32
35
  npx nuxi module add @barzhsieh/nuxt-content-mermaid
33
36
  ```
34
37
 
38
+ > Nuxt CLI 對第三方模組預設會裝到 `dependencies`。若想放 `devDependencies`，請裝完後移動或改用下方手動安裝。
39
+
40
+ **裝到 `devDependencies`（需手動加入 `modules`）：**
41
+
42
+ ```bash
43
+ # pnpm
44
+ pnpm add -D @barzhsieh/nuxt-content-mermaid
45
+
46
+ # npm
47
+ npm install -D @barzhsieh/nuxt-content-mermaid
48
+
49
+ # yarn
50
+ yarn add -D @barzhsieh/nuxt-content-mermaid
51
+ ```
52
+
35
53
  ### 2. 配置 `nuxt.config.ts`
36
54
 
37
- 確保模組已加入 `modules` 清單（若使用 `nuxi module add` 則會自動加入）：
55
+ 確保模組已加入 `modules` 清單（若使用 `nuxi module add` 則可略過）：
38
56
 
39
57
  ```ts
40
58
  export default defineNuxtConfig({
package/dist/module.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@barzhsieh/nuxt-content-mermaid",
3
3
  "configKey": "mermaidContent",
4
4
  "compatibility": {
5
- "nuxt": "^4.0.0"
5
+ "nuxt": "^3.20.1 || ^4.1.0"
6
6
  },
7
- "version": "1.0.2",
7
+ "version": "1.0.3",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "1.0.2",
10
10
  "unbuild": "3.6.1"
package/dist/module.mjs CHANGED
@@ -26,7 +26,7 @@ const module$1 = defineNuxtModule({
26
26
  name: "@barzhsieh/nuxt-content-mermaid",
27
27
  configKey: "mermaidContent",
28
28
  compatibility: {
29
- nuxt: "^4.0.0"
29
+ nuxt: "^3.20.1 || ^4.1.0"
30
30
  }
31
31
  },
32
32
  defaults: {
package/dist/runtime/components/Mermaid.vue CHANGED
@@ -139,6 +139,7 @@ async function renderMermaid() {
139
139
  theme: mermaidTheme.value
140
140
  };
141
141
  mermaid.initialize(initOptions);
142
+ mermaidContainer.value.removeAttribute("data-processed");
142
143
  mermaidContainer.value.textContent = mermaidDefinition;
143
144
  await nextTick();
144
145
  await mermaid.run({
package/package.json CHANGED
@@ -1,7 +1,17 @@
1
1
  {
2
2
  "name": "@barzhsieh/nuxt-content-mermaid",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "A Nuxt module designed for integrating Mermaid with `@nuxt/content`. It automatically converts `mermaid` code blocks in Markdown into responsive chart components, and supports lazy loading and dark/light theme switching.",
5
+ "keywords": [
6
+ "nuxt",
7
+ "nuxt-module",
8
+ "content",
9
+ "nuxt-content",
10
+ "markdown",
11
+ "mermaid",
12
+ "diagram",
13
+ "mdc"
14
+ ],
5
15
  "repository": {
6
16
  "type": "git",
7
17
  "url": "git+https://github.com/andy820621/nuxt-content-mermaid.git"
@@ -41,30 +51,32 @@
41
51
  "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
42
52
  },
43
53
  "dependencies": {
44
- "@nuxt/kit": "^4.2.1",
45
- "defu": "^6.1.4"
54
+ "@nuxt/kit": "catalog:integrations",
55
+ "defu": "catalog:dev"
46
56
  },
47
57
  "peerDependencies": {
48
- "@nuxt/content": "^3.8.0"
58
+ "nuxt": "^3.20.1 || ^4.1.0",
59
+ "@nuxt/content": ">=3.5.0"
49
60
  },
50
61
  "devDependencies": {
51
- "@nuxt/content": "3.8.0",
52
- "@nuxt/devtools": "^3.1.0",
53
- "@nuxt/eslint-config": "^1.10.0",
54
- "@nuxt/module-builder": "^1.0.2",
55
- "@nuxt/schema": "^4.2.1",
56
- "@nuxt/test-utils": "^3.20.1",
57
- "@nuxtjs/color-mode": "^4.0.0",
58
- "@types/node": "latest",
59
- "changelogen": "^0.6.2",
60
- "eslint": "^9.39.1",
61
- "mermaid": "^11.12.1",
62
- "nuxt": "^4.2.1",
63
- "typescript": "~5.9.3",
64
- "vitest": "^4.0.10",
65
- "vue-tsc": "^3.1.4"
62
+ "@nuxt/content": "catalog:integrations",
63
+ "@nuxt/devtools": "catalog:dev",
64
+ "@nuxt/eslint-config": "catalog:dev",
65
+ "@nuxt/module-builder": "catalog:dev",
66
+ "@nuxt/schema": "catalog:integrations",
67
+ "@nuxt/test-utils": "catalog:test",
68
+ "@nuxtjs/color-mode": "catalog:dev",
69
+ "@types/node": "catalog:types",
70
+ "changelogen": "catalog:dev",
71
+ "eslint": "catalog:dev",
72
+ "mermaid": "catalog:integrations",
73
+ "nuxt": "catalog:dev",
74
+ "typescript": "catalog:dev",
75
+ "vitest": "catalog:test",
76
+ "vue-tsc": "catalog:dev"
66
77
  },
67
78
  "volta": {
68
79
  "node": "22.21.1"
69
- }
80
+ },
81
+ "packageManager": "pnpm@10.24.0+sha512.01ff8ae71b4419903b65c60fb2dc9d34cf8bb6e06d03bde112ef38f7a34d6904c424ba66bea5cdcf12890230bf39f9580473140ed9c946fef328b6e5238a345a"
70
82
  }