From 088eb4d82b48168a7be758deff5159d73a60e431 Mon Sep 17 00:00:00 2001
From: Long Ho <holevietlong@gmail.com>
Date: Fri, 1 Jan 2021 22:11:15 -0500
Subject: [PATCH] docs: add Vue support docs for eslint-plugin-formatjs

---
 website/docs/tooling/linter.md | 20 +++++++++++++++++++-
 website/docs/vue-intl.md       | 30 ++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/website/docs/tooling/linter.md b/website/docs/tooling/linter.md
index a21b40900c..477ac21a7f 100644
--- a/website/docs/tooling/linter.md
+++ b/website/docs/tooling/linter.md
@@ -3,7 +3,7 @@ id: linter
 title: eslint-plugin-formatjs
 ---
 
-This eslint plugin allows you to enforce certain rules in your ICU message. This is currently under development
+This eslint plugin allows you to enforce certain rules in your ICU message.
 
 ## Usage
 
@@ -44,6 +44,8 @@ Then in your eslint config:
 }
 ```
 
+### React
+
 Currently this uses `intl.formatMessage`, `defineMessage`, `defineMessages`, `<FormattedMessage>` from `react-intl` as hooks to verify the message. Therefore, in your code use 1 of the following mechanisms:
 
 ```tsx
@@ -74,6 +76,22 @@ function foo() {
 }
 ```
 
+### Vue
+
+This will check against `intl.formatMessage`, `$formatMessage` function calls in both your JS/TS & your SFC `.vue` files. For example:
+
+```vue
+<template>
+  <p>
+    {{
+      $formatMessage({
+        defaultMessage: 'today is {now, date}',
+      })
+    }}
+  </p>
+</template>
+```
+
 ## Available Rules
 
 ### `blacklist-elements`
diff --git a/website/docs/vue-intl.md b/website/docs/vue-intl.md
index 71ccb5951b..4831dc25f8 100644
--- a/website/docs/vue-intl.md
+++ b/website/docs/vue-intl.md
@@ -116,3 +116,33 @@ We currently support:
 - `$formatTimeRange`
 - `$formatDisplayName`
 - `$formatList`
+
+## Caveats
+
+### Using ICU in Vue SFC
+
+Since `}}` & `{{` are special tokens in `.vue` `<template>`, this can cause potential conflict with ICU MessageFormat syntax, e.g:
+
+```html {4}
+<template>
+  <p>
+    {{ $formatMessage({ defaultMessage: '{count, selectordinal, offset:1 one {#}
+    other {# more}}', }) }}
+  </p>
+</template>
+```
+
+Notice the `{# more}}` where it ends with `}}`. This will cause parsing issue in your `vue` template. In order to work around this issue, we recommend using space to turn `}}` into `} }`.
+
+```vue {6}
+<template>
+  <p>
+    {{
+      $formatMessage({
+        defaultMessage:
+          '{count, selectordinal, offset:1 one {#} other {# more} }',
+      })
+    }}
+  </p>
+</template>
+```