DOC-3190: Update Vuejs public documents. (#3722)

* DOC-3190: Update Vuejs public documents.

* DOC-3190: fix number list rendering issue.

* DOC-3190: Update and configure ifeval blocks to seperate api vs licensekey ref.

* Update modules/ROOT/partials/integrations/vue-quick-start.adoc

* Update modules/ROOT/partials/integrations/vue-tech-ref.adoc

* DOC-3190: Replace your-api-key with no-api-key.

* DOC-3190: Update warning message for no-api-key.

* DOC-3190: Replace warning message for no-api-key.

* Update modules/ROOT/partials/integrations/vue-quick-start.adoc

Co-authored-by: Mitchell Crompton <[email protected]>

* Update modules/ROOT/partials/integrations/vue-quick-start.adoc

Co-authored-by: Mitchell Crompton <[email protected]>

* DOC-3190: Fix incorrect naming for file.

---------

Co-authored-by: Mitchell Crompton <[email protected]>

Author: kemister85

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::[]

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+`

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}].

modules/ROOT/partials/integrations/bundling-integrations-not-recommended-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.

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/bundling-integrations-not-recommended-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,30 +30,35 @@ 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 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_.
 
-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_.
-
++
 * Follow the prompts and type `+tinymce-vue-demo+` as the project name.
 . Change into the newly created directory.
 +
@@ -61,47 +68,47 @@ 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:
-+
+ifeval::["{productSource}" == "cloud"]
+.For example:
 [source,jsx]
 ----
 <script setup>
@@ -111,10 +118,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"
+      apiKey="no-api-key"
       :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>
@@ -136,27 +146,103 @@ 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]
 ----
-<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"]
-. 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).
 --
-: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].
++
+.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.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.
 +
@@ -167,14 +253,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 +264,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].