Skip to content

Commit 40e0161

Browse files
hipertrackerhipertracker
committed
add Overmind integration
1 parent 734e909 commit 40e0161

File tree

13 files changed

+261
-122
lines changed

13 files changed

+261
-122
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,4 @@ yarn-error.log*
3232
*.njsproj
3333
*.sln
3434
/.vscode/
35+
/.history/

‎README.md‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,43 @@
1-
# Quasar App (quasar2-overmind)
1+
# Quasar 2 + Typescript + Overmind
22

3-
A Quasar Framework app
3+
Simple example of using Quasar 2 + TypeScript + Overmind with hooks
4+
5+
- Quasar 2 <https://next.quasar.dev/>
6+
- Overmind <https://www.overmindjs.org/>
7+
- TypeScript <https://www.typescriptlang.org/>
48

59
## Install the dependencies
10+
611
```bash
712
yarn
813
```
914

1015
### Start the app in development mode (hot-code reloading, error reporting, etc.)
16+
1117
```bash
1218
quasar dev
1319
```
1420

1521
### Lint the files
22+
1623
```bash
1724
yarn run lint
1825
```
1926

2027
### Build the app for production
28+
2129
```bash
2230
quasar build
2331
```
2432

2533
### Customize the configuration
34+
2635
See [Configuring quasar.conf.js](https://v2.quasar.dev/quasar-cli/quasar-conf-js).
36+
37+
### Using Overmind DevTools debugger
38+
39+
Overmind DevTools: <https://overmindjs.org/core/devtools>
40+
41+
```
42+
npx overmind-devtools@latest
43+
```

‎quasar.conf.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ module.exports = configure(function (/* ctx */) {
3131
boot: [
3232
'i18n',
3333
'axios',
34+
'overmind'
3435
],
3536

3637
// https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
@@ -54,7 +55,7 @@ module.exports = configure(function (/* ctx */) {
5455

5556
// Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
5657
build: {
57-
vueRouterMode: 'hash', // available values: 'hash', 'history'
58+
vueRouterMode: 'history', // available values: 'hash', 'history'
5859

5960
// transpile: false,
6061

@@ -83,7 +84,7 @@ module.exports = configure(function (/* ctx */) {
8384
devServer: {
8485
https: false,
8586
port: 8080,
86-
open: true // opens browser window automatically
87+
open: false // opens browser window automatically
8788
},
8889

8990
// https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework

‎src/boot/overmind.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { boot } from 'quasar/wrappers';
2+
import { config } from '../overmind';
3+
import { createOvermind } from 'overmind';
4+
5+
// "async" is optional;
6+
// more info on params: https://quasar.dev/quasar-cli/boot-files
7+
export default boot(({ app }) => {
8+
const overmind = createOvermind(config);
9+
app.provide('overmind', overmind);
10+
});

‎src/components/CompositionComponent.vue‎

Lines changed: 0 additions & 64 deletions
This file was deleted.

‎src/components/HelloWorld.vue‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<template>
2+
<div class="hello">
3+
<h2 class="text-lg">{{ state.welcome }}</h2>
4+
<SimpleCounter class="mb-3" />
5+
<p>
6+
For a guide and recipes on how to configure / customize this project,<br />
7+
check out the
8+
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
9+
>vue-cli documentation</a
10+
>.
11+
</p>
12+
<h3>Installed CLI Plugins</h3>
13+
<ul>
14+
<li>
15+
<a
16+
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
17+
target="_blank"
18+
rel="noopener"
19+
>babel</a
20+
>
21+
</li>
22+
<li>
23+
<a
24+
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
25+
target="_blank"
26+
rel="noopener"
27+
>typescript</a
28+
>
29+
</li>
30+
<li>
31+
<a
32+
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
33+
target="_blank"
34+
rel="noopener"
35+
>eslint</a
36+
>
37+
</li>
38+
</ul>
39+
<h3>Essential Links</h3>
40+
<ul>
41+
<li>
42+
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
43+
</li>
44+
<li>
45+
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
46+
>Forum</a
47+
>
48+
</li>
49+
<li>
50+
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
51+
>Community Chat</a
52+
>
53+
</li>
54+
<li>
55+
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
56+
>Twitter</a
57+
>
58+
</li>
59+
<li>
60+
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
61+
</li>
62+
</ul>
63+
<h3>Ecosystem</h3>
64+
<ul>
65+
<li>
66+
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
67+
>vue-router</a
68+
>
69+
</li>
70+
<li>
71+
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
72+
</li>
73+
<li>
74+
<a
75+
href="https://github.com/vuejs/vue-devtools#vue-devtools"
76+
target="_blank"
77+
rel="noopener"
78+
>vue-devtools</a
79+
>
80+
</li>
81+
<li>
82+
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
83+
>vue-loader</a
84+
>
85+
</li>
86+
<li>
87+
<a
88+
href="https://github.com/vuejs/awesome-vue"
89+
target="_blank"
90+
rel="noopener"
91+
>awesome-vue</a
92+
>
93+
</li>
94+
</ul>
95+
</div>
96+
</template>
97+
98+
<script lang="ts">
99+
import { defineComponent } from 'vue';
100+
import { useOvermind } from '../overmind';
101+
import SimpleCounter from './SimpleCounter.vue';
102+
103+
export default defineComponent({
104+
name: 'HelloWorld',
105+
components: {
106+
SimpleCounter,
107+
},
108+
setup() {
109+
const state = useOvermind.state();
110+
return { state };
111+
},
112+
});
113+
</script>
114+

‎src/components/SimpleCounter.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div class="q-pb-lg">
3+
<q-btn round color="primary" icon="add" @click="actions.inc"/>
4+
<span class="bg-gray-200 text-xl ml-3 mr-3 q-mx-sm text-h6">
5+
Counter: {{ state.counter }}
6+
</span>
7+
<q-btn round color="primary" icon="remove" @click="actions.dec"/>
8+
</div>
9+
</template>
10+
11+
<script lang="ts">
12+
import { defineComponent } from 'vue';
13+
import { useOvermind } from '../overmind';
14+
15+
export default defineComponent({
16+
name: 'SimpleCounter',
17+
setup() {
18+
const state = useOvermind.state();
19+
const actions = useOvermind.actions();
20+
return { state, actions };
21+
},
22+
});
23+
</script>

‎src/index.template.html‎

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,40 @@
33
<head>
44
<title><%= productName %></title>
55

6-
<meta charset="utf-8">
7-
<meta name="description" content="<%= productDescription %>">
8-
<meta name="format-detection" content="telephone=no">
9-
<meta name="msapplication-tap-highlight" content="no">
10-
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
6+
<meta charset="utf-8" />
7+
<meta name="description" content="<%= productDescription %>" />
8+
<meta name="format-detection" content="telephone=no" />
9+
<meta name="msapplication-tap-highlight" content="no" />
10+
<meta
11+
name="viewport"
12+
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
13+
/>
1114

12-
<link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
13-
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
14-
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
15-
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
16-
<link rel="icon" type="image/ico" href="favicon.ico">
15+
<link
16+
rel="icon"
17+
type="image/png"
18+
sizes="128x128"
19+
href="icons/favicon-128x128.png"
20+
/>
21+
<link
22+
rel="icon"
23+
type="image/png"
24+
sizes="96x96"
25+
href="icons/favicon-96x96.png"
26+
/>
27+
<link
28+
rel="icon"
29+
type="image/png"
30+
sizes="32x32"
31+
href="icons/favicon-32x32.png"
32+
/>
33+
<link
34+
rel="icon"
35+
type="image/png"
36+
sizes="16x16"
37+
href="icons/favicon-16x16.png"
38+
/>
39+
<link rel="icon" type="image/ico" href="favicon.ico" />
1740
</head>
1841
<body>
1942
<!-- DO NOT touch the following DIV -->

‎src/layouts/MainLayout.vue‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,37 +52,37 @@ import EssentialLink from 'components/EssentialLink.vue'
5252
5353
const linksList = [
5454
{
55-
title: 'Docs',
55+
title: 'Quasar Docs',
5656
caption: 'quasar.dev',
5757
icon: 'school',
5858
link: 'https://quasar.dev'
5959
},
6060
{
61-
title: 'Github',
61+
title: 'Quasar Github',
6262
caption: 'github.com/quasarframework',
6363
icon: 'code',
6464
link: 'https://github.com/quasarframework'
6565
},
6666
{
67-
title: 'Discord Chat Channel',
67+
title: 'Quasar Discord Chat Channel',
6868
caption: 'chat.quasar.dev',
6969
icon: 'chat',
7070
link: 'https://chat.quasar.dev'
7171
},
7272
{
73-
title: 'Forum',
73+
title: 'Quasar Forum',
7474
caption: 'forum.quasar.dev',
7575
icon: 'record_voice_over',
7676
link: 'https://forum.quasar.dev'
7777
},
7878
{
79-
title: 'Twitter',
79+
title: 'Quasar Twitter',
8080
caption: '@quasarframework',
8181
icon: 'rss_feed',
8282
link: 'https://twitter.quasar.dev'
8383
},
8484
{
85-
title: 'Facebook',
85+
title: 'Quasar Facebook',
8686
caption: '@QuasarFramework',
8787
icon: 'public',
8888
link: 'https://facebook.quasar.dev'
@@ -92,6 +92,12 @@ const linksList = [
9292
caption: 'Community Quasar projects',
9393
icon: 'favorite',
9494
link: 'https://awesome.quasar.dev'
95+
},
96+
{
97+
title: 'Overmind',
98+
caption: 'The best UI state library',
99+
icon: 'psychology',
100+
link: 'https://overmindjs.org/'
95101
}
96102
];
97103

0 commit comments

Comments
 (0)