Skip to content

Commit bb989ff

Browse files
hipertrackerhipertracker
committed
commit whole project
1 parent 75bf69f commit bb989ff

File tree

14 files changed

+365
-134
lines changed

14 files changed

+365
-134
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,4 @@ pnpm-debug.log*
2121
*.njsproj
2222
*.sln
2323
*.sw?
24+
/.history/

‎README.md‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,34 @@
11
# vue3-overmind
22

3-
## Project setup
3+
Simple example of using Vue 3 + TypeScript + Overmind with hooks
4+
5+
* Vue 3 <https://v3.vuejs.org/>
6+
* Overmind <https://www.overmindjs.org/>
7+
48
```
59
yarn install
610
```
711

812
### Compiles and hot-reloads for development
13+
914
```
1015
yarn serve
1116
```
1217

1318
### Compiles and minifies for production
19+
1420
```
1521
yarn build
1622
```
1723

1824
### Lints and fixes files
25+
1926
```
2027
yarn lint
2128
```
2229

23-
### Customize configuration
24-
See [Configuration Reference](https://cli.vuejs.org/config/).
30+
### Run Overmind debuggers
31+
32+
```
33+
npx overmind-devtools@latest
34+
```

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
},
1010
"dependencies": {
1111
"core-js": "^3.6.5",
12+
"overmind": "^27.0.0",
13+
"overmind-vue": "^27.0.0",
14+
"tailwindcss": "^2.0.4",
1215
"vue": "^3.0.0"
1316
},
1417
"devDependencies": {

‎public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
88
<title><%= htmlWebpackPlugin.options.title %></title>
9+
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
910
</head>
1011
<body>
1112
<noscript>

‎src/App.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
<template>
2-
<img alt="Vue logo" src="./assets/logo.png" />
3-
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
2+
<div>
3+
<div class="flex justify-center">
4+
<img alt="Vue logo" src="./assets/logo.png" />
5+
</div>
6+
<HelloWorld />
7+
</div>
48
</template>
59

610
<script lang="ts">

‎src/components/DecBtn.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<button
3+
type="button"
4+
class="inline-flex items-center p-1.5 border border-transparent rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
5+
>
6+
<svg
7+
class="h-5 w-5"
8+
xmlns="http://www.w3.org/2000/svg"
9+
viewBox="0 0 20 20"
10+
fill="currentColor"
11+
aria-hidden="true"
12+
>
13+
<path
14+
fill-rule="evenodd"
15+
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
16+
clip-rule="evenodd"
17+
/>
18+
</svg>
19+
</button>
20+
</template>

‎src/components/HelloWorld.vue‎

Lines changed: 11 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,23 @@
11
<template>
2-
<div class="hello">
3-
<h1>{{ msg }}</h1>
4-
<p>
5-
For a guide and recipes on how to configure / customize this project,<br />
6-
check out the
7-
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
8-
>vue-cli documentation</a
9-
>.
10-
</p>
11-
<h3>Installed CLI Plugins</h3>
12-
<ul>
13-
<li>
14-
<a
15-
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
16-
target="_blank"
17-
rel="noopener"
18-
>babel</a
19-
>
20-
</li>
21-
<li>
22-
<a
23-
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
24-
target="_blank"
25-
rel="noopener"
26-
>typescript</a
27-
>
28-
</li>
29-
<li>
30-
<a
31-
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
32-
target="_blank"
33-
rel="noopener"
34-
>eslint</a
35-
>
36-
</li>
37-
</ul>
38-
<h3>Essential Links</h3>
39-
<ul>
40-
<li>
41-
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
42-
</li>
43-
<li>
44-
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
45-
>Forum</a
46-
>
47-
</li>
48-
<li>
49-
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
50-
>Community Chat</a
51-
>
52-
</li>
53-
<li>
54-
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
55-
>Twitter</a
56-
>
57-
</li>
58-
<li>
59-
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
60-
</li>
61-
</ul>
62-
<h3>Ecosystem</h3>
63-
<ul>
64-
<li>
65-
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
66-
>vue-router</a
67-
>
68-
</li>
69-
<li>
70-
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
71-
</li>
72-
<li>
73-
<a
74-
href="https://github.com/vuejs/vue-devtools#vue-devtools"
75-
target="_blank"
76-
rel="noopener"
77-
>vue-devtools</a
78-
>
79-
</li>
80-
<li>
81-
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
82-
>vue-loader</a
83-
>
84-
</li>
85-
<li>
86-
<a
87-
href="https://github.com/vuejs/awesome-vue"
88-
target="_blank"
89-
rel="noopener"
90-
>awesome-vue</a
91-
>
92-
</li>
93-
</ul>
2+
<div>
3+
<h2 class="text-lg">{{ state.welcome }}</h2>
4+
<SimpleCounter />
945
</div>
956
</template>
967

978
<script lang="ts">
989
import { defineComponent } from "vue";
10+
import { useOvermind } from "../overmind";
11+
import SimpleCounter from "./SimpleCounter.vue";
9912
10013
export default defineComponent({
10114
name: "HelloWorld",
102-
props: {
103-
msg: String,
15+
components: {
16+
SimpleCounter,
17+
},
18+
setup() {
19+
const state = useOvermind.state();
20+
return { state };
10421
},
10522
});
10623
</script>
107-
108-
<!-- Add "scoped" attribute to limit CSS to this component only -->
109-
<style scoped>
110-
h3 {
111-
margin: 40px 0 0;
112-
}
113-
ul {
114-
list-style-type: none;
115-
padding: 0;
116-
}
117-
li {
118-
display: inline-block;
119-
margin: 0 10px;
120-
}
121-
a {
122-
color: #42b983;
123-
}
124-
</style>

‎src/components/IncBtn.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<button
3+
type="button"
4+
class="inline-flex items-center p-1.5 border border-transparent rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
5+
>
6+
<svg
7+
class="h-5 w-5"
8+
xmlns="http://www.w3.org/2000/svg"
9+
fill="none"
10+
viewBox="0 0 24 24"
11+
stroke="currentColor"
12+
>
13+
<path
14+
stroke-linecap="round"
15+
stroke-linejoin="round"
16+
stroke-width="2"
17+
d="M18 12H6"
18+
/>
19+
</svg>
20+
</button>
21+
</template>

‎src/components/SimpleCounter.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="pt-3">
3+
<DecBtn @click="actions.inc" />
4+
<span class="bg-gray-200 text-xl ml-3 mr-3">
5+
{{ state.counter }}
6+
</span>
7+
<IncBtn @click="actions.dec" />
8+
</div>
9+
</template>
10+
11+
<script lang="ts">
12+
import { defineComponent } from "vue";
13+
import IncBtn from "./IncBtn.vue";
14+
import DecBtn from "./DecBtn.vue";
15+
import { useOvermind } from "../overmind";
16+
17+
export default defineComponent({
18+
name: "SimpleCounter",
19+
components: {
20+
IncBtn,
21+
DecBtn,
22+
},
23+
setup() {
24+
const state = useOvermind.state();
25+
const actions = useOvermind.actions();
26+
return { state, actions };
27+
},
28+
});
29+
</script>

‎src/main.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { createApp } from "vue";
21
import App from "./App.vue";
2+
import { config } from "./overmind";
3+
import { createApp } from "vue";
4+
import { createOvermind } from "overmind";
5+
import { withOvermind } from "overmind-vue/vue3";
6+
7+
const overmind = createOvermind(config);
38

4-
createApp(App).mount("#app");
9+
createApp(withOvermind(overmind, App)).mount("#app");

0 commit comments

Comments
 (0)