Update README

Author: hipertracker

README.md

@@ -1,9 +1,10 @@
-# vue3-overmind
+# Vue 3 + Typescript + Overmind
 
 Simple example of using Vue 3 + TypeScript + Overmind with hooks
 
 * Vue 3 <https://v3.vuejs.org/>
 * Overmind <https://www.overmindjs.org/>
+* TypeScript <https://www.typescriptlang.org/>
 
 ```
 yarn install
@@ -27,7 +28,9 @@ yarn build
 yarn lint
 ```
 
-### Run Overmind debuggers
+### Using Overmind DevTools debugger
+
+Overmind DevTools: <https://overmindjs.org/core/devtools>
 
 ```
 npx overmind-devtools@latest

src/components/HelloWorld.vue

@@ -1,7 +1,97 @@
 <template>
-  <div>
+  <div class="hello">
     <h2 class="text-lg">{{ state.welcome }}</h2>
-    <SimpleCounter />
+    <SimpleCounter class="mb-3" />
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br />
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
+        >vue-cli documentation</a
+      >.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+          target="_blank"
+          rel="noopener"
+          >babel</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
+          target="_blank"
+          rel="noopener"
+          >typescript</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+          target="_blank"
+          rel="noopener"
+          >eslint</a
+        >
+      </li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li>
+        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
+      </li>
+      <li>
+        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
+          >Forum</a
+        >
+      </li>
+      <li>
+        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
+          >Community Chat</a
+        >
+      </li>
+      <li>
+        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
+          >Twitter</a
+        >
+      </li>
+      <li>
+        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
+      </li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li>
+        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
+          >vue-router</a
+        >
+      </li>
+      <li>
+        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-devtools#vue-devtools"
+          target="_blank"
+          rel="noopener"
+          >vue-devtools</a
+        >
+      </li>
+      <li>
+        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
+          >vue-loader</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+          rel="noopener"
+          >awesome-vue</a
+        >
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -15,9 +105,30 @@ export default defineComponent({
   components: {
     SimpleCounter,
   },
+  props: {
+    msg: String,
+  },
   setup() {
     const state = useOvermind.state();
     return { state };
   },
 });
 </script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/SimpleCounter.vue

@@ -2,7 +2,7 @@
   <div class="pt-3">
     <DecBtn @click="actions.inc" />
     <span class="bg-gray-200 text-xl ml-3 mr-3">
-      {{ state.counter }}
+      Counter: {{ state.counter }}
     </span>
     <IncBtn @click="actions.dec" />
   </div>