From 57ac594dcc880a263dd22a592cc7a569dc1b1989 Mon Sep 17 00:00:00 2001
From: Teages <Teages@teages.xyz>
Date: Tue, 2 Jan 2024 18:12:24 +0800
Subject: [PATCH] docs: update tutorial and introduction

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

diff --git a/README.md b/README.md
index a5c50a6..8f63902 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,13 @@
 
 Use minimal configuration to setup i18n for your Nuxt app.
 
+## Features
+
+- 🚀 Minimal config, add multi-language support in just three minutes
+- 🪶 Build-in (and force) lazy-load support
+
+Used by [Cytoid/cytoid.io](https://cytoid.io).
+
 ## Quick Setup
 
 1. Add `@teages/nuxt-locale-lite` dependency to your project
@@ -60,6 +67,68 @@ Add these config to your `settings.json`:
 
 That's it! ✨
 
+## How to use
+
+### Add locale files
+
+This module will automatically load the locale files under the `locales` (or path you configured) directory.
+
+For example, we have the following directory structure:
+
+```bash
+locales
+├── en-US
+│   ├── another.json
+│   └── general.json
+├── zh-CN
+│   ├── another.json
+│   └── general.json
+└── ja-JP
+    ├── another.json
+    └── general.json
+```
+
+in `locales/en-US/general.json`:
+```json
+{
+  "hello": "Hello world!",
+  "deep": {
+    "hello": "Hello the deep world!"
+  }
+}
+```
+
+### Get locale messages
+
+Then you can use the following code to get the locale messages:
+
+```vue
+<script setup>
+const { t } = useLocales()
+console.log(t('general.hello')) // Hello world!
+</script>
+
+<template>
+  <div>
+    {{ $t('general.deep.hello') }} <!-- Hello the deep world! -->
+  </div>
+</template>
+```
+
+### Change locale
+
+You can use the following code to change the locale:
+
+```ts
+const { locale, setLocale } = useLocales()
+console.log(locale.value) // en-US
+setLocale('zh-CN')
+console.log(locale.value) // zh-CN
+
+// or
+locale.value = 'ja-JP'
+```
+
 ## Development
 
 ```bash