From 4cf82d43dc7ae6f79051a379cd51fa6a09c1ad9e Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Tue, 22 Sep 2020 04:46:45 +0100
Subject: [PATCH] docs: add the delimiters option (#529)

---
 src/api/options-misc.md   | 23 +++++++++++++++++++++++
 src/style-guide/README.md | 19 +++++++++++--------
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/api/options-misc.md b/src/api/options-misc.md
index db81563e45..353edb9440 100644
--- a/src/api/options-misc.md
+++ b/src/api/options-misc.md
@@ -10,6 +10,29 @@
 
   Another benefit of specifying a `name` option is debugging. Named components result in more helpful warning messages. Also, when inspecting an app in the [vue-devtools](https://github.com/vuejs/vue-devtools), unnamed components will show up as `<AnonymousComponent>`, which isn't very informative. By providing the `name` option, you will get a much more informative component tree.
 
+## delimiters
+
+- **Type:** `Array<string>`
+
+- **Default:** `{{ "['\u007b\u007b', '\u007d\u007d']" }}` 
+
+- **Restrictions:** This option is only available in the full build, with in-browser template compilation.
+
+- **Details:**
+
+  Sets the delimiters used for text interpolation within the template.
+
+  Typically this is used to avoid conflicting with server-side frameworks that also use mustache syntax.
+
+- **Example:**
+
+  ```js
+  Vue.createApp({
+    // Delimiters changed to ES6 template string style
+    delimiters: ['${', '}']
+  })
+  ```
+
 ## inheritAttrs
 
 - **Type:** `boolean`
diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 34c9e9170d..3c1280838f 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -1314,28 +1314,31 @@ This is the default order we recommend for component options. They're split into
 1. **Global Awareness** (requires knowledge beyond the component)
     - `name`
 
-2. **Template Dependencies** (assets used in the template)
+2. **Template Modifiers** (changes the way templates are compiled)
+    - `delimiters`
+
+3. **Template Dependencies** (assets used in the template)
     - `components`
     - `directives`
 
-3. **Composition** (merges properties into the options)
+4. **Composition** (merges properties into the options)
     - `extends`
     - `mixins`
     - `provide`/`inject`
 
-4. **Interface** (the interface to the component)
+5. **Interface** (the interface to the component)
     - `inheritAttrs`
     - `props`
     - `emits`
 
-5. **Composition API** (the entry point for using the Composition API)
+6. **Composition API** (the entry point for using the Composition API)
     - `setup`
 
-6. **Local State** (local reactive properties)
+7. **Local State** (local reactive properties)
     - `data`
     - `computed`
 
-7. **Events** (callbacks triggered by reactive events)
+8. **Events** (callbacks triggered by reactive events)
     - `watch`
     - Lifecycle Events (in the order they are called)
         - `beforeCreate`
@@ -1352,10 +1355,10 @@ This is the default order we recommend for component options. They're split into
         - `renderTracked`
         - `renderTriggered`
 
-8.  **Non-Reactive Properties** (instance properties independent of the reactivity system)
+9.  **Non-Reactive Properties** (instance properties independent of the reactivity system)
     - `methods`
 
-9. **Rendering** (the declarative description of the component output)
+10. **Rendering** (the declarative description of the component output)
     - `template`/`render`
 
 ### Element attribute order <sup data-p="c">recommended</sup>