summaryrefslogtreecommitdiff
path: root/examples/with-nanostores/src/components/AdminsVue.vue
diff options
context:
space:
mode:
Diffstat (limited to 'examples/with-nanostores/src/components/AdminsVue.vue')
-rw-r--r--examples/with-nanostores/src/components/AdminsVue.vue30
1 files changed, 30 insertions, 0 deletions
diff --git a/examples/with-nanostores/src/components/AdminsVue.vue b/examples/with-nanostores/src/components/AdminsVue.vue
new file mode 100644
index 000000000..68dcd2065
--- /dev/null
+++ b/examples/with-nanostores/src/components/AdminsVue.vue
@@ -0,0 +1,30 @@
+<template>
+ <h1>Vue</h1>
+ <ul>
+ <li v-for="user in list" :key="user.name">
+ {{JSON.stringify(user, null, 2)}}
+ </li>
+ </ul>
+ <div>
+ <h3>Counter</h3>
+ <p>{{count}}</p>
+ <button @click="decreaseCounter">-1</button>
+ <button @click="increaseCounter">+1</button>
+ </div>
+ <br />
+</template>
+
+<script>
+ import { useStore } from 'nanostores/vue'
+
+ import { admins } from '../store/admins.js'
+ import { counter, increaseCounter, decreaseCounter } from '../store/counter.js'
+
+ export default {
+ setup() {
+ const list = useStore(admins)
+ const count = useStore(counter)
+ return { list, count, increaseCounter, decreaseCounter }
+ }
+ }
+</script>