From cb7a527a3885fa0f0d305c43b3a8905c8a6b64e8 Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Mon, 12 May 2025 14:47:48 +1000
Subject: [PATCH 01/11] DOC-3190: Update Vuejs public documents.

---
 .../integrations/angular-quick-start.adoc     |  1 -
 ...-integrations-not-reccomended-message.adoc |  1 +
 .../integrations/bundling-integration.adoc    | 43 +-----------
 .../integrations/vue-quick-start.adoc         | 67 ++++++++++---------
 .../partials/integrations/vue-tech-ref.adoc   | 29 +++++---
 .../webcomponent-quick-start.adoc             |  1 -
 6 files changed, 57 insertions(+), 85 deletions(-)
 create mode 100644 modules/ROOT/partials/integrations/bunding-integrations-not-reccomended-message.adoc

diff --git a/modules/ROOT/partials/integrations/angular-quick-start.adoc b/modules/ROOT/partials/integrations/angular-quick-start.adoc
index 76d2c8b6b4..f0d6bd20a8 100644
--- a/modules/ROOT/partials/integrations/angular-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/angular-quick-start.adoc
@@ -143,7 +143,6 @@ To use an independent deployment of {productname}, add a script to either the `+
 * Bundling {productname} with the Angular application using a module loader (such as Webpack).
 +
 --
-:depth: 2
 include::partial$integrations/bundling-integration.adoc[]
 --
 endif::[]
diff --git a/modules/ROOT/partials/integrations/bunding-integrations-not-reccomended-message.adoc b/modules/ROOT/partials/integrations/bunding-integrations-not-reccomended-message.adoc
new file mode 100644
index 0000000000..92923c1e9d
--- /dev/null
+++ b/modules/ROOT/partials/integrations/bunding-integrations-not-reccomended-message.adoc
@@ -0,0 +1 @@
+IMPORTANT: {companyname} does not recommend bundling `tinymce` and `{packageName}` with a module loader. Bundling these packages can be complex and error prone.
\ No newline at end of file
diff --git a/modules/ROOT/partials/integrations/bundling-integration.adoc b/modules/ROOT/partials/integrations/bundling-integration.adoc
index 9fe62b8136..373aac1f34 100644
--- a/modules/ROOT/partials/integrations/bundling-integration.adoc
+++ b/modules/ROOT/partials/integrations/bundling-integration.adoc
@@ -1,24 +1,3 @@
-ifeval::[{depth} == 1]
-
-IMPORTANT: {companyname} does not recommend bundling `tinymce` and `{packageName}` with a module loader. Bundling these packages can be complex and error prone.
-
-To bundle {productname} using a module loader (such as Webpack, Rollup, or Browserify), import or require the `tinymce` package, followed by the `{packageName}` package, then the other required {productname}-related imports.
-
-Example of bundling:
-
-[source,js,subs="attributes+"]
-----
-/* Add the {packageName} wrapper to the bundle */
-import { Editor } from '@tinymce/{packageName}';
-/* For instructions on bundling TinyMCE, see the Bundling TinyMCE documentation. */
-----
-
-For instructions on bundling {productname}, see: xref:introduction-to-bundling-tinymce.adoc[Bundling {productname}].
-
-
-endif::[]
-ifeval::[{depth} == 2]
-
 IMPORTANT: {companyname} does not recommend bundling `tinymce` and `{packageName}` with a module loader. Bundling these packages can be complex and error prone.
 
 To bundle {productname} using a module loader (such as Webpack, Rollup, or Browserify), import or require the `tinymce` package, followed by the `{packageName}` package, then the other required {productname}-related imports.
@@ -32,24 +11,4 @@ import { Editor } from '@tinymce/{packageName}';
 /* For instructions on bundling TinyMCE, see the Bundling TinyMCE documentation. */
 ----
 
-For instructions on bundling {productname}, see: xref:introduction-to-bundling-tinymce.adoc[Bundling {productname}].
-
-endif::[]
-ifndef::depth[]
-
-IMPORTANT: {companyname} does not recommend bundling `tinymce` and `{packageName}` with a module loader. Bundling these packages can be complex and error prone.
-
-To bundle {productname} using a module loader (such as Webpack, Rollup, or Browserify), import or require the `tinymce` package, followed by the `{packageName}` package, then the other required {productname}-related imports.
-
-Example of bundling:
-
-[source,js,subs="attributes+"]
-----
-/* Add the {packageName} wrapper to the bundle */
-import { Editor } from '@tinymce/{packageName}';
-/* For instructions on bundling TinyMCE, see the Bundling TinyMCE documentation. */
-----
-
-For instructions on bundling {productname}, see: xref:introduction-to-bundling-tinymce.adoc[Bundling {productname}].
-
-endif::[]
+For instructions on bundling {productname}, see: xref:introduction-to-bundling-tinymce.adoc[Bundling {productname}].
\ No newline at end of file
diff --git a/modules/ROOT/partials/integrations/vue-quick-start.adoc b/modules/ROOT/partials/integrations/vue-quick-start.adoc
index a7471b769d..df87b832f7 100644
--- a/modules/ROOT/partials/integrations/vue-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/vue-quick-start.adoc
@@ -1,15 +1,17 @@
 :packageName: tinymce-vue
 
-The https://github.com/tinymce/tinymce-vue[Official {productname} Vue.js component] integrates {productname} into Vue.js projects. This procedure creates a https://cli.vuejs.org/guide/creating-a-project.html#vue-create[basic Vue.js application] containing a {productname} editor.
+The link:https://github.com/tinymce/tinymce-vue[Official {productname} Vue.js component] integrates {productname} into Vue.js projects, providing a powerful WYSIWYG editor within the Vue ecosystem. This procedure creates a link:https://cli.vuejs.org/guide/creating-a-project.html#vue-create[basic Vue.js application] containing a {productname} editor.
 
 Version 4 and later of the `+tinymce-vue+` package supports Vue.js 3.x, but does not support Vue.js 2.x. For Vue.js 2.x applications, use `+tinymce-vue+` version 3.
 
+include::partial$integrations/bunding-integrations-not-reccomended-message.adoc[]
+
 [[tinymce-vuejs-integration-live-examples]]
 == TinyMCE Vue.js integration live examples
 
 For examples of the {productname} Vue.js 3.x integration:
 
-. Clone the `+tinymce/tinymce-vue+` GitHub repository. For example:
+. Clone the `+tinymce/tinymce-vue+` link:https://github.com/tinymce/tinymce-vue[GitHub repository]. For example:
 +
 [source,sh]
 ----
@@ -28,29 +30,33 @@ yarn install
 yarn demo
 ----
 
-The `+tinymce-vue+` demo is now running. Visit: http://localhost:3001.
+The `+tinymce-vue+` demo is now running. Visit: link:http://localhost:3001[http://localhost:3001].
 
 == Prerequisites
 
-This procedure requires https://nodejs.org/[Node.js (and npm)].
+This procedure requires:
+
+* link:https://nodejs.org/en/download/[Node.js LTS] (recommended).
+* link:https://cli.vuejs.org/[Vue CLI] (optional).
 
 == Procedure
 
-. Create a new Vue project named `tinymce-vue-demo` using the https://github.com/vuejs/create-vue[Create Vue Tool].
+. Create a new Vue project named `tinymce-vue-demo` using the link:https://github.com/vuejs/create-vue[Create Vue Tool].
 * From a command line or command prompt create a Vue.js 3.x project: `+tinymce-vue-demo+`.
 +
 [source,sh]
 ----
 npm create vue@3
 ----
-* If you need to create a Vue.js 2.x projects instead:
+* If a Vue.js 2.x project is required instead use:
 +
 [source,sh]
 ----
 npm create vue@2
 ----
 
-NOTE: As per the https://vuejs.org/about/faq.html#what-s-the-difference-between-vue-2-and-vue-3[Vue FAQ], _Vue 2 will reach End of Life by the end of 2023_.
+[NOTE]
+As per the link:https://vuejs.org/about/faq.html#what-s-the-difference-between-vue-2-and-vue-3[Vue FAQ], _Vue 2 will reach End of Life by the end of 2023_.
 
 * Follow the prompts and type `+tinymce-vue-demo+` as the project name.
 . Change into the newly created directory.
@@ -61,43 +67,43 @@ cd tinymce-vue-demo
 ----
 
 ifeval::["{productSource}" == "package-manager"]
-. Install the `+tinymce+` and `+tinymce-vue+` packages and save them to your `+package.json+` with `+--save+`.
+. Install the `+tinymce+` and `+tinymce-vue+` packages.
 
 * For Vue.js 3.x users:
 +
 [source,sh]
 ----
-npm install --save tinymce "@tinymce/tinymce-vue@^5"
+npm install  tinymce "@tinymce/tinymce-vue"
 ----
 
 * For Vue.js 2.x users:
 +
 [source,sh]
 ----
-npm install --save tinymce "@tinymce/tinymce-vue@^3"
+npm install  tinymce "@tinymce/tinymce-vue@^3"
 ----
 
 endif::[]
 ifeval::["{productSource}" != "package-manager"]
 
-. Install the `+tinymce-vue+` package and save it to your `+package.json+` with `+--save+`.
+. Install the `+tinymce-vue+` package.
 * For Vue.js 3.x users:
 +
 [source,sh]
 ----
-npm install --save "@tinymce/tinymce-vue@^5"
+npm install  "@tinymce/tinymce-vue"
 ----
 * For Vue.js 2.x users:
 +
 [source,sh]
 ----
-npm install --save "@tinymce/tinymce-vue@^3"
+npm install  "@tinymce/tinymce-vue@^3"
 ----
 
 endif::[]
 
 . Using a text editor, open `+/path/to/tinymce-vue-demo/src/App.vue+`.
-.. Add a {productname} configuration to the `+<template>+` using the `+<Editor>+` tag.
+.. Add a {productname} configuration to the `+<template>+` using the `+<editor>+` tag.
 .. Add `+import Editor from '@tinymce/tinymce-vue'+` to the start of the `+<script>+`.
 +
 For example:
@@ -111,10 +117,13 @@ import Editor from '@tinymce/tinymce-vue'
 <template>
   <main id="sample">
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-    <Editor
-      api-key="no-api-key"
+    <editor
+      id="uuid"
+      licenseKey="gpl"
       :init="{
-        plugins: 'lists link image table code help wordcount'
+        plugins: 'advlist anchor autolink charmap code fullscreen help image insertdatetime link lists media preview searchreplace table visualblocks wordcount',
+        toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
+        height: 500,
       }"
     />
   </main>
@@ -144,19 +153,20 @@ Such as:
 +
 [source,html]
 ----
-<Editor api-key='your-api-key' :init="{ /* your other settings */ }" />
+<editor api-key='your-api-key' :init="{ /* your other settings */ }" />
 ----
 endif::[]
 ifeval::["{productSource}" == "package-manager"]
 . Bundle {productname} with the Vue.js application using a module loader (such as Webpack).
 +
 --
-:depth: 1
 include::partial$integrations/bundling-integration.adoc[]
 --
 endif::[]
 ifeval::["{productSource}" == "zip"]
-. {productname} can be self-hosted by either: xref:deploying-tinymce-independent[Deploying {productname} independent of the Vue.js application], or xref:bundle[Bundling {productname} with the Vue.js application].
+. {productname} can be self-hosted by either:
+** xref:deploying-tinymce-independent[Deploying {productname} independent of the Vue.js application],
+** xref:zip-install.adoc[{productname} .zip deployments].
 
 * [[deploying-tinymce-independent]] Deploying {productname} independent of the Vue.js application. To use a {productname} instance that has been deployed independent of the Vue.js application, use an HTML `+<script>+` tag.
 +
@@ -167,14 +177,7 @@ To use an independent deployment of {productname}, add a script to either the `<
 <script src="/path/to/tinymce.min.js"></script>
 ----
 +
-To use an independent deployment of {productname} with the example create a Vue.js application, add the script to `/path/to/tinymce-vue-demo/public/index.html`.
-
-* [[bundle]] Bundle {productname} with the Vue.js application using a module loader (such as Webpack).
-+
---
-:depth: 2
-include::partial$integrations/bundling-integration.adoc[]
---
+To use an independent deployment of {productname} with the example create a Vue.js application, add the `+<script>+` to `/path/to/tinymce-vue-demo/public/index.html`.
 endif::[]
 
 . Test the application using the Node.js development server.
@@ -185,16 +188,16 @@ endif::[]
 npm run dev
 ----
 
-* To stop the development server, select on the command line or command prompt and press _Ctrl+C_.
+* To stop the development server, select on the command line or command prompt and press `+Ctrl+C+`.
 
 == Deploying the application to a HTTP server
 
-The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: https://vuejs.org/v2/guide/deployment.html[Vue.js - Production Deployment].
+The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: link:https://vuejs.org/v2/guide/deployment.html[Vue.js - Production Deployment].
 
 == Next Steps
 
-* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-vue/[the tinymce-vue storybook].
+* For examples of the {productname} integration, see: link:https://tinymce.github.io/tinymce-vue/[the tinymce-vue storybook].
 * For information on customizing:
 ** {productname} integration, see: xref:vue-ref.adoc[Vue.js framework Technical Reference].
 ** {productname}, see: xref:basic-setup.adoc[Basic setup].
-** The Vue.js application, see: https://vuejs.org/v2/guide/[Vue.js Documentation].
+** The Vue.js application, see: link:https://vuejs.org/v2/guide/[Vue.js Documentation].
diff --git a/modules/ROOT/partials/integrations/vue-tech-ref.adoc b/modules/ROOT/partials/integrations/vue-tech-ref.adoc
index d2ea3334aa..56238f7742 100644
--- a/modules/ROOT/partials/integrations/vue-tech-ref.adoc
+++ b/modules/ROOT/partials/integrations/vue-tech-ref.adoc
@@ -23,19 +23,19 @@
 [[installing-the-tinymce-vuejs-integration-using-npm]]
 == Installing the TinyMCE Vue.js integration using NPM
 
-To install the `+tinymce-vue+` package and save it to your `+package.json+`.
+To install the `+tinymce-vue+` package.
 
 * For Vue.js 3.x users:
 +
 [source,sh]
 ----
-npm install --save "@tinymce/tinymce-vue@^4"
+npm install "@tinymce/tinymce-vue"
 ----
 * For Vue.js 2.x users:
 +
 [source,sh]
 ----
-npm install --save "@tinymce/tinymce-vue@^3"
+npm install "@tinymce/tinymce-vue@^3"
 ----
 
 [[using-the-tinymce-vuejs-integration]]
@@ -77,7 +77,16 @@ var app = new Vue({
 +
 [source,html]
 ----
-<editor api-key="API_KEY" :init="{plugins: 'wordcount'}" />
+<editor
+  id="uuid"
+  api-key="your-api-key"
+  tinymce-script-src="/Users/karl/tinymce/test_apps/test-app-updated-config/node_modules/tinymce/tinymce.min.js"
+  :init="{
+    plugins: 'advlist anchor autolink charmap code fullscreen help image insertdatetime link lists media preview searchreplace table visualblocks wordcount',
+    toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
+    height: 500,
+  }"
+/>
 ----
 
 [[configuring-the-editor]]
@@ -103,6 +112,7 @@ The editor accepts the following properties:
 />
 ----
 
+[NOTE]
 None of the configuration properties are *required* for `+tinymce-vue+` to work. Specify a {cloudname} API key using `+api-key+` to remove the `+This domain is not registered...+` warning message.
 
 [[api-key]]
@@ -199,7 +209,7 @@ The `+disabled+` property can dynamically switch the editor between a "disabled"
 [[id]]
 === `+id+`
 
-An id for the editor. Used for retrieving the editor instance using the `+tinymce.get('ID')+` method.
+An `id` for the editor. Used for retrieving the editor instance using the `+tinymce.get('ID')+` method.
 
 *Type:* `+String+`
 
@@ -288,12 +298,13 @@ For a list of available {productname} events, see: xref:events.adoc#editor-core-
 
 *Default value:* `+'change keyup undo redo'+`.
 
+// ref: https://github.com/tinymce/tinymce-vue/blob/d66bfa9eb6a819a1943431362cf978f7bf56c145/src/main/ts/Utils.ts#L111
 ==== Example: using `+model-events+`
 
 [source,html]
 ----
 <editor
-  model-events="change keydown blur focus paste"
+  model-events="change input undo paste"
 />
 ----
 
@@ -378,7 +389,7 @@ For information setting the toolbar for {productname}, see: xref:toolbar-configu
 [[tinymce-script-src]]
 === `+tinymce-script-src+`
 
-Use the `+tinymce-script-src+` prop to specify an external version of TinyMCE to lazy load.
+Use the `+tinymce-script-src+` prop to specify an external version of {productname} to lazy load from.
 
 *Type:* `+String+`
 
@@ -401,7 +412,7 @@ The `+v-model+` directive can be used to create a two-way data binding. For exam
 <editor v-model="content" />
 ----
 
-For information on `+v-model+` and form input bindings, see: https://vuejs.org/guide/essentials/forms.html[Vue.js documentation - Form Input Bindings].
+For information on `+v-model+` and form input bindings, see: link:https://vuejs.org/guide/essentials/forms.html[Vue.js documentation - Form Input Bindings].
 
 [[event-binding]]
 == Event binding
@@ -417,7 +428,7 @@ For older versions of Vue (Vue 2) supported by v3.x, the syntax for event bindin
 
 When the handler is called (*handlerFunction* in this example), it is called with two arguments:
 
-* `+event+` - The TinyMCE event object.
+* `+event+` - The {productname} event object.
 * `+editor+` - A reference to the editor.
 
 The following events are available:
diff --git a/modules/ROOT/partials/integrations/webcomponent-quick-start.adoc b/modules/ROOT/partials/integrations/webcomponent-quick-start.adoc
index 9f2c35c353..23075e3786 100644
--- a/modules/ROOT/partials/integrations/webcomponent-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/webcomponent-quick-start.adoc
@@ -48,7 +48,6 @@ npm install tinymce @tinymce/tinymce-webcomponent
 . Bundle {productname} with the Web Component application using a module loader (such as Webpack).
 +
 --
-:depth: 1
 include::partial$integrations/bundling-integration.adoc[]
 --
 

From f4255abe779a45157dc999ac496f0f46f92c62f8 Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Mon, 12 May 2025 15:21:34 +1000
Subject: [PATCH 02/11] DOC-3190: fix number list rendering issue.

---
 modules/ROOT/partials/integrations/vue-quick-start.adoc | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/modules/ROOT/partials/integrations/vue-quick-start.adoc b/modules/ROOT/partials/integrations/vue-quick-start.adoc
index df87b832f7..064c660f63 100644
--- a/modules/ROOT/partials/integrations/vue-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/vue-quick-start.adoc
@@ -54,10 +54,11 @@ npm create vue@3
 ----
 npm create vue@2
 ----
-
++
 [NOTE]
 As per the link:https://vuejs.org/about/faq.html#what-s-the-difference-between-vue-2-and-vue-3[Vue FAQ], _Vue 2 will reach End of Life by the end of 2023_.
 
++
 * Follow the prompts and type `+tinymce-vue-demo+` as the project name.
 . Change into the newly created directory.
 +

From 2a649711c7901ee5c5535c0948975180ddedbac8 Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Mon, 12 May 2025 16:04:54 +1000
Subject: [PATCH 03/11] DOC-3190: Update and configure ifeval blocks to
 seperate api vs licensekey ref.

---
 .../integrations/vue-quick-start.adoc         | 101 +++++++++++++++---
 1 file changed, 88 insertions(+), 13 deletions(-)

diff --git a/modules/ROOT/partials/integrations/vue-quick-start.adoc b/modules/ROOT/partials/integrations/vue-quick-start.adoc
index 064c660f63..db73b05d95 100644
--- a/modules/ROOT/partials/integrations/vue-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/vue-quick-start.adoc
@@ -74,14 +74,14 @@ ifeval::["{productSource}" == "package-manager"]
 +
 [source,sh]
 ----
-npm install  tinymce "@tinymce/tinymce-vue"
+npm install tinymce "@tinymce/tinymce-vue"
 ----
 
 * For Vue.js 2.x users:
 +
 [source,sh]
 ----
-npm install  tinymce "@tinymce/tinymce-vue@^3"
+npm install tinymce "@tinymce/tinymce-vue@^3"
 ----
 
 endif::[]
@@ -92,13 +92,13 @@ ifeval::["{productSource}" != "package-manager"]
 +
 [source,sh]
 ----
-npm install  "@tinymce/tinymce-vue"
+npm install "@tinymce/tinymce-vue"
 ----
 * For Vue.js 2.x users:
 +
 [source,sh]
 ----
-npm install  "@tinymce/tinymce-vue@^3"
+npm install "@tinymce/tinymce-vue@^3"
 ----
 
 endif::[]
@@ -107,8 +107,8 @@ endif::[]
 .. Add a {productname} configuration to the `+<template>+` using the `+<editor>+` tag.
 .. Add `+import Editor from '@tinymce/tinymce-vue'+` to the start of the `+<script>+`.
 +
-For example:
-+
+ifeval::["{productSource}" == "cloud"]
+.For example:
 [source,jsx]
 ----
 <script setup>
@@ -120,7 +120,7 @@ import Editor from '@tinymce/tinymce-vue'
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
     <editor
       id="uuid"
-      licenseKey="gpl"
+      apiKey="no-api-key"
       :init="{
         plugins: 'advlist anchor autolink charmap code fullscreen help image insertdatetime link lists media preview searchreplace table visualblocks wordcount',
         toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
@@ -146,11 +146,7 @@ import Editor from '@tinymce/tinymce-vue'
 }
 </style>
 ----
-
-ifeval::["{productSource}" == "cloud"]
-. Include the `+api-key+` option in the editor element and include your link:{accountsignup}/[{cloudname} API key].
-+
-Such as:
+. Include the `+api-key+` option in the editor element and include your link:{accountsignup}/[{cloudname} API key]. Such as:
 +
 [source,html]
 ----
@@ -158,13 +154,92 @@ Such as:
 ----
 endif::[]
 ifeval::["{productSource}" == "package-manager"]
-. Bundle {productname} with the Vue.js application using a module loader (such as Webpack).
 +
+.For example:
+[source,jsx]
+----
+<script setup>
+import Editor from '@tinymce/tinymce-vue'
+</script>
+
+<template>
+  <main id="sample">
+    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+    <editor
+      id="uuid"
+      licenseKey="gpl"
+      :init="{
+        plugins: 'advlist anchor autolink charmap code fullscreen help image insertdatetime link lists media preview searchreplace table visualblocks wordcount',
+        toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
+        height: 500,
+      }"
+    />
+  </main>
+</template>
+
+<style scoped>
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+@media (min-width: 1024px) {
+  #sample {
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    width: 1000px;
+  }
+}
+</style>
+----
++
+. Bundle {productname} with the Vue.js application using a module loader (such as Webpack).
 --
 include::partial$integrations/bundling-integration.adoc[]
 --
 endif::[]
 ifeval::["{productSource}" == "zip"]
++
+.For example:
+[source,jsx]
+----
+<script setup>
+import Editor from '@tinymce/tinymce-vue'
+</script>
+
+<template>
+  <main id="sample">
+    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+    <editor
+      id="uuid"
+      licenseKey="gpl"
+      :init="{
+        plugins: 'advlist anchor autolink charmap code fullscreen help image insertdatetime link lists media preview searchreplace table visualblocks wordcount',
+        toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
+        height: 500,
+      }"
+    />
+  </main>
+</template>
+
+<style scoped>
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+@media (min-width: 1024px) {
+  #sample {
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    width: 1000px;
+  }
+}
+</style>
+----
++
 . {productname} can be self-hosted by either:
 ** xref:deploying-tinymce-independent[Deploying {productname} independent of the Vue.js application],
 ** xref:zip-install.adoc[{productname} .zip deployments].

From 88ac30fd61ebe42f2a31267cabfdb59c96894ee1 Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Wed, 14 May 2025 09:04:19 +1000
Subject: [PATCH 04/11] Update
 modules/ROOT/partials/integrations/vue-quick-start.adoc

---
 modules/ROOT/partials/integrations/vue-quick-start.adoc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ROOT/partials/integrations/vue-quick-start.adoc b/modules/ROOT/partials/integrations/vue-quick-start.adoc
index db73b05d95..1fe7080218 100644
--- a/modules/ROOT/partials/integrations/vue-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/vue-quick-start.adoc
@@ -150,7 +150,7 @@ import Editor from '@tinymce/tinymce-vue'
 +
 [source,html]
 ----
-<editor api-key='your-api-key' :init="{ /* your other settings */ }" />
+<editor api-key='no-api-key' :init="{ /* your other settings */ }" />
 ----
 endif::[]
 ifeval::["{productSource}" == "package-manager"]

From aa6769b5d6e2b697c9d2a4799fbdbcc35ec7da00 Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Wed, 14 May 2025 09:05:02 +1000
Subject: [PATCH 05/11] Update
 modules/ROOT/partials/integrations/vue-tech-ref.adoc

---
 modules/ROOT/partials/integrations/vue-tech-ref.adoc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ROOT/partials/integrations/vue-tech-ref.adoc b/modules/ROOT/partials/integrations/vue-tech-ref.adoc
index 56238f7742..ee713f35f6 100644
--- a/modules/ROOT/partials/integrations/vue-tech-ref.adoc
+++ b/modules/ROOT/partials/integrations/vue-tech-ref.adoc
@@ -79,7 +79,7 @@ var app = new Vue({
 ----
 <editor
   id="uuid"
-  api-key="your-api-key"
+  api-key="no-api-key"
   tinymce-script-src="/Users/karl/tinymce/test_apps/test-app-updated-config/node_modules/tinymce/tinymce.min.js"
   :init="{
     plugins: 'advlist anchor autolink charmap code fullscreen help image insertdatetime link lists media preview searchreplace table visualblocks wordcount',

From f0a222ffdb4157115acab88b4d9734d7f2a051d1 Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Wed, 14 May 2025 09:20:21 +1000
Subject: [PATCH 06/11] DOC-3190: Replace your-api-key with no-api-key.

---
 modules/ROOT/partials/integrations/vue-tech-ref.adoc | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/modules/ROOT/partials/integrations/vue-tech-ref.adoc b/modules/ROOT/partials/integrations/vue-tech-ref.adoc
index ee713f35f6..657ff243bc 100644
--- a/modules/ROOT/partials/integrations/vue-tech-ref.adoc
+++ b/modules/ROOT/partials/integrations/vue-tech-ref.adoc
@@ -80,7 +80,6 @@ var app = new Vue({
 <editor
   id="uuid"
   api-key="no-api-key"
-  tinymce-script-src="/Users/karl/tinymce/test_apps/test-app-updated-config/node_modules/tinymce/tinymce.min.js"
   :init="{
     plugins: 'advlist anchor autolink charmap code fullscreen help image insertdatetime link lists media preview searchreplace table visualblocks wordcount',
     toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
@@ -97,7 +96,7 @@ The editor accepts the following properties:
 [source,html,subs="attributes+"]
 ----
 <editor
-  api-key="your-api-key"
+  api-key="no-api-key"
   cloud-channel="{productmajorversion}"
   :disabled=false
   id="uuid"
@@ -131,7 +130,7 @@ include::partial$misc/get-an-api-key.adoc[]
 [source,html]
 ----
 <editor
-  api-key="your-api-key"
+  api-key="no-api-key"
 />
 ----
 
@@ -178,7 +177,7 @@ Such as:
 [source,html,subs="attributes+"]
 ----
 <editor
-  api-key="your-api-key"
+  api-key="no-api-key"
   cloud-channel="{productmajorversion}-dev"
   :init="{ /* your other settings */ }"
 />
@@ -213,7 +212,7 @@ An `id` for the editor. Used for retrieving the editor instance using the `+tiny
 
 *Type:* `+String+`
 
-*Default value:* Automatically generated https://tools.ietf.org/html/rfc4122[UUID]
+*Default value:* Automatically generated link:https://tools.ietf.org/html/rfc4122[UUID]
 
 ==== Example: using `+id+`
 

From 428e1ccabd1c8fc93c59f1444f450fb881c31fd0 Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Wed, 14 May 2025 10:00:25 +1000
Subject: [PATCH 07/11] DOC-3190: Update warning message for no-api-key.

---
 modules/ROOT/partials/integrations/vue-tech-ref.adoc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ROOT/partials/integrations/vue-tech-ref.adoc b/modules/ROOT/partials/integrations/vue-tech-ref.adoc
index 657ff243bc..693bf15dac 100644
--- a/modules/ROOT/partials/integrations/vue-tech-ref.adoc
+++ b/modules/ROOT/partials/integrations/vue-tech-ref.adoc
@@ -112,7 +112,7 @@ The editor accepts the following properties:
 ----
 
 [NOTE]
-None of the configuration properties are *required* for `+tinymce-vue+` to work. Specify a {cloudname} API key using `+api-key+` to remove the `+This domain is not registered...+` warning message.
+None of the configuration properties are *required* for `+tinymce-vue+` to work. Specify a {cloudname} API key using `+api-key+` to remove the "A valid API key is required to continue using TinyMCE. Please alert the admin to check the current API key. Click here to learn more." warning message.
 
 [[api-key]]
 === `+api-key+`

From ea83953391b85731690349a94046d6d77a955b88 Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Wed, 14 May 2025 10:21:15 +1000
Subject: [PATCH 08/11] DOC-3190: Replace warning message for no-api-key.

---
 modules/ROOT/partials/integrations/angular-tech-ref.adoc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ROOT/partials/integrations/angular-tech-ref.adoc b/modules/ROOT/partials/integrations/angular-tech-ref.adoc
index f915cab951..4d579f2b45 100644
--- a/modules/ROOT/partials/integrations/angular-tech-ref.adoc
+++ b/modules/ROOT/partials/integrations/angular-tech-ref.adoc
@@ -107,7 +107,7 @@ The editor accepts the following properties:
 ></editor>
 ----
 
-None of the configuration properties are *required* for `+tinymce-angular+` to work. Specify a {cloudname} API key using `+apiKey+` to remove the `+This domain is not registered...+` warning message.
+None of the configuration properties are *required* for `+tinymce-angular+` to work. Specify a {cloudname} API key using `+apiKey+` to remove the "A valid API key is required to continue using TinyMCE. Please alert the admin to check the current API key. Click here to learn more." warning message.
 
 [[apikey]]
 === `+apiKey+`

From a7ba9dfc613683317d45678866f395c713bd82d1 Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Wed, 14 May 2025 14:01:18 +1000
Subject: [PATCH 09/11] Update
 modules/ROOT/partials/integrations/vue-quick-start.adoc

Co-authored-by: Mitchell Crompton <mitchell.crompton@tiny.cloud>
---
 modules/ROOT/partials/integrations/vue-quick-start.adoc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ROOT/partials/integrations/vue-quick-start.adoc b/modules/ROOT/partials/integrations/vue-quick-start.adoc
index 1fe7080218..026d4a8b52 100644
--- a/modules/ROOT/partials/integrations/vue-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/vue-quick-start.adoc
@@ -241,7 +241,7 @@ import Editor from '@tinymce/tinymce-vue'
 ----
 +
 . {productname} can be self-hosted by either:
-** xref:deploying-tinymce-independent[Deploying {productname} independent of the Vue.js application],
+** xref:deploying-tinymce-independent.adoc[Deploying {productname} independent of the Vue.js application],
 ** xref:zip-install.adoc[{productname} .zip deployments].
 
 * [[deploying-tinymce-independent]] Deploying {productname} independent of the Vue.js application. To use a {productname} instance that has been deployed independent of the Vue.js application, use an HTML `+<script>+` tag.

From cc076b9d2fc78ba8c19a0fa605dfb36457c04be3 Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Wed, 14 May 2025 14:01:25 +1000
Subject: [PATCH 10/11] Update
 modules/ROOT/partials/integrations/vue-quick-start.adoc

Co-authored-by: Mitchell Crompton <mitchell.crompton@tiny.cloud>
---
 modules/ROOT/partials/integrations/vue-quick-start.adoc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ROOT/partials/integrations/vue-quick-start.adoc b/modules/ROOT/partials/integrations/vue-quick-start.adoc
index 026d4a8b52..e96eb8514d 100644
--- a/modules/ROOT/partials/integrations/vue-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/vue-quick-start.adoc
@@ -48,7 +48,7 @@ This procedure requires:
 ----
 npm create vue@3
 ----
-* If a Vue.js 2.x project is required instead use:
+* If a Vue.js 2.x project is required, instead use:
 +
 [source,sh]
 ----

From ef8b9a01aa0831b006df52c98a6474d3be89b2c2 Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Wed, 14 May 2025 16:01:56 +1000
Subject: [PATCH 11/11] DOC-3190: Fix incorrect naming for file.

---
 ....adoc => bundling-integrations-not-recommended-message.adoc} | 2 +-
 modules/ROOT/partials/integrations/vue-quick-start.adoc         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename modules/ROOT/partials/integrations/{bunding-integrations-not-reccomended-message.adoc => bundling-integrations-not-recommended-message.adoc} (79%)

diff --git a/modules/ROOT/partials/integrations/bunding-integrations-not-reccomended-message.adoc b/modules/ROOT/partials/integrations/bundling-integrations-not-recommended-message.adoc
similarity index 79%
rename from modules/ROOT/partials/integrations/bunding-integrations-not-reccomended-message.adoc
rename to modules/ROOT/partials/integrations/bundling-integrations-not-recommended-message.adoc
index 92923c1e9d..4c1caf5c4c 100644
--- a/modules/ROOT/partials/integrations/bunding-integrations-not-reccomended-message.adoc
+++ b/modules/ROOT/partials/integrations/bundling-integrations-not-recommended-message.adoc
@@ -1 +1 @@
-IMPORTANT: {companyname} does not recommend bundling `tinymce` and `{packageName}` with a module loader. Bundling these packages can be complex and error prone.
\ No newline at end of file
+IMPORTANT: {companyname} does not recommend bundling `tinymce` and `{packageName}` with a module loader. Bundling these packages can be complex and error prone.
diff --git a/modules/ROOT/partials/integrations/vue-quick-start.adoc b/modules/ROOT/partials/integrations/vue-quick-start.adoc
index e96eb8514d..ddc2c94423 100644
--- a/modules/ROOT/partials/integrations/vue-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/vue-quick-start.adoc
@@ -4,7 +4,7 @@ The link:https://github.com/tinymce/tinymce-vue[Official {productname} Vue.js co
 
 Version 4 and later of the `+tinymce-vue+` package supports Vue.js 3.x, but does not support Vue.js 2.x. For Vue.js 2.x applications, use `+tinymce-vue+` version 3.
 
-include::partial$integrations/bunding-integrations-not-reccomended-message.adoc[]
+include::partial$integrations/bundling-integrations-not-recommended-message.adoc[]
 
 [[tinymce-vuejs-integration-live-examples]]
 == TinyMCE Vue.js integration live examples