From 8302aad6a6dc0983cc104386d4f5d6525071aa76 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 28 Jul 2021 15:49:54 +0200
Subject: [PATCH] docs: add HMR entry

---
 docs/.vitepress/config.js               |  4 ++++
 docs/cookbook/hot-module-replacement.md | 20 ++++++++++++++++++++
 docs/cookbook/index.md                  |  1 +
 3 files changed, 25 insertions(+)
 create mode 100644 docs/cookbook/hot-module-replacement.md

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index f2f4076f..ef1566c1 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -216,6 +216,10 @@ module.exports = {
           text: 'Cookbook',
           link: '/cookbook/',
           children: [
+            {
+              text: 'Hot Module Replacement',
+              link: '/cookbook/hot-module-replacement.html',
+            },
             {
               text: 'Testing',
               link: '/cookbook/testing.html',
diff --git a/docs/cookbook/hot-module-replacement.md b/docs/cookbook/hot-module-replacement.md
new file mode 100644
index 00000000..0f32c675
--- /dev/null
+++ b/docs/cookbook/hot-module-replacement.md
@@ -0,0 +1,20 @@
+# HMR (Hot Module Replacement)
+
+Pinia supports Hot Module replacement so you can edit your stores and interact with them directly in your app without reloading the page, allowing you to keep the existing state, add, or even remove state, actions, and getters.
+
+At the moment, only [Vite](https://vitejs.dev/) is officially supported but any bundler implementing the `import.meta.hot` spec should work (e.g. [webpack](https://webpack.js.org/api/module-variables/#importmetawebpackhot) seems to use `import.meta.webpackHot` instead of `import.meta.hot`).
+You need to add this snippet of code next to any store declaration. Let's say you have three stores: `auth.js`, `cart.js`, and `chat.js`, you will have to add (and adapt) this after the creation of the _store definition_:
+
+```js
+// auth.js
+import { defineStore, acceptHMRUpdate } from 'pinia'
+
+const useAuth = defineStore('auth', {
+  // options...
+})
+
+// make sure to pass the right store definition, `useAuth` in this case.
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useAuth, import.meta.hot))
+}
+```
diff --git a/docs/cookbook/index.md b/docs/cookbook/index.md
index 4337a2f0..7ebe03cf 100644
--- a/docs/cookbook/index.md
+++ b/docs/cookbook/index.md
@@ -1,5 +1,6 @@
 # Cookbook
 
+- [HMR](./hot-module-replacement.md): How to activate hot module replacement and improve the developer experience.
 - [Testing Stores (WIP)](./testing.md): How to unit test Stores and mock them in component unit tests.
 - [Composing Stores](./composing-stores.md): How to cross use multiple stores. e.g. using the user store in the cart store.
 - [Options API](./options-api.md): How to use Pinia without the composition API, outside of `setup()`.
-- 
2.47.2