From 65900b187a55bde622db7812d384c0f310f1ac04 Mon Sep 17 00:00:00 2001
From: Zaytsev Kirill <zaytsev.cmath10@gmail.com>
Date: Thu, 18 Nov 2021 11:15:46 +0300
Subject: [PATCH] docs: Updated README.md

---
 README.md | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 67 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 8d2da25..91e73eb 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,70 @@
 # vue-i18n-loader
 
-vue-i18n-loader is a set of webpack loader & plugin to load translations from
-`<i18n>` custom blocks
+This is an experimental webpack tool for `vue-i18n`. The package provides webpack loader and plugin to load translations from
+`<i18n>` custom blocks.
+
+If the plugin added to a `webpack.config.js`, it will add
+prefix to translation messages paths & their usages in `<template>`/`script` blocks.
+Currently, not all variants of `vue-i18n` syntax are covered with prefix, in particular,
+renamings are not supported:
+```javascript
+const t = this.$i18n.t
+
+t('some.translation.path') // will not be prefixed
+```
+
+Supported syntax:
+* methods `$t`, `$tc` in templates;
+* methods `t`, `tc` in `this.$i18n.%methodName%` calls;
+* directive `v-t`;
+* interpolation component `<i18n>`.
+
+Restrictions:
+* renamings;
+* usage as map method like `paths.map(this.$i18n.t)` or similar;
+* computed dynamic paths.
+
+Webpack config example:
+
+```javascript
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const VueI18NLoaderPlugin = require('@retailcrm/vue-i18n-loader/lib/plugin')
+
+module.exports = {
+  mode: 'development',
+
+  devtool: 'source-map',
+
+  context: __dirname,
+
+  entry: './__fixtures__/entry.js',
+
+  resolve: {
+    alias: {
+      '~target': path.resolve(__dirname, fixture),
+    },
+  },
+
+  output: {
+    path: '/',
+    filename: 'bundle.js'
+  },
+
+  module: {
+    rules: [{
+      test: /\.vue$/,
+      loader: 'vue-loader',
+    }, {
+      resourceQuery: /blockType=i18n/,
+      type: 'javascript/auto',
+      loader: '@retailcrm/vue-i18n-loader',
+    }],
+  },
+
+  plugins: [
+    new VueLoaderPlugin(),
+    new VueI18NLoaderPlugin(),
+  ],
+}
+```