docs: add Vue support docs for eslint-plugin-formatjs

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`

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