From e170e65c0edfff0f9d39d9fbdcf8f039048a3b67 Mon Sep 17 00:00:00 2001
From: Ivan Demchuk <ivan.demchuk@gmail.com>
Date: Thu, 4 Nov 2021 22:54:17 +0200
Subject: [PATCH] Add docs about ftl file imports

---
 src/.vuepress/config.ts          |  2 +-
 src/howto/importing-ftl-files.md | 47 ++++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/howto/importing-ftl-files.md

diff --git a/src/.vuepress/config.ts b/src/.vuepress/config.ts
index 0d075b1..6af37d0 100644
--- a/src/.vuepress/config.ts
+++ b/src/.vuepress/config.ts
@@ -78,7 +78,7 @@ export default defineUserConfig<DefaultThemeOptions>({
       '/vue-i18n-comparison.html',
       {
         text: 'HOWTO',
-        children: ['/howto/change-locale.html', '/howto/date-time.html', '/howto/access-outside-of-component.html'],
+        children: ['/howto/change-locale.html', '/howto/date-time.html', '/howto/importing-ftl-files.html', '/howto/access-outside-of-component.html'],
         collapsable: false,
       },
       {
diff --git a/src/howto/importing-ftl-files.md b/src/howto/importing-ftl-files.md
new file mode 100644
index 0000000..9a0cb25
--- /dev/null
+++ b/src/howto/importing-ftl-files.md
@@ -0,0 +1,47 @@
+# Importing .ftl files
+
+In addition to using Vue custom blocks to define localization messages, it is possible to import them from .ftl files.
+
+```js
+import { FluentBundle, FluentResource } from '@fluent/bundle'
+
+import enMessages from './en.ftl'
+
+const enBundle = new FluentBundle('en')
+enBundle.addResource(new FluentResource(enMessages))
+```
+
+You will need to configure your build system to support importing .ftl files as raw strings.
+
+::: tip Note
+You can code-split your localizations messages into multiple .ftl files. Just import .ftl file when you need and call `bundle.addResource`. But make sure that there are not duplicate keys in different files as localization messages added using `addResource` are global.
+:::
+
+### Webpack
+
+For Webpack 5 you need to set .ftl files to be `type: 'asset/source'`. In earlier Webpack versions, this was done using `raw-loader`.
+
+```js
+module: {
+  rules: [
+    ...,
+    {
+      test: /\.ftl$/,
+      type: 'asset/source'
+    }
+  ]
+}
+```
+
+### Vite
+
+For Vite you need to add `?raw` to your .ftl file imports to import them as strings.
+
+```js
+import { FluentBundle, FluentResource } from '@fluent/bundle'
+
+import enMessages from './en.ftl?raw'
+
+const enBundle = new FluentBundle('en')
+enBundle.addResource(new FluentResource(enMessages))
+```