Skip to content

Commit f84582f

Browse files
sfxcodesfxcode
committed
feat(pinia): Add pinia-colada sample
1 parent 05a4322 commit f84582f

File tree

7 files changed

+1608
-1499
lines changed

7 files changed

+1608
-1499
lines changed

‎app/composables/navigation.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@ export function useNavigationMenu() {
4040
title: 'Data',
4141
icon: 'pi pi-server',
4242
child: [
43-
{ href: '/data/stores', title: 'Stores' },
43+
{ href: '/data/stores', title: 'Pinia Stores' },
44+
{ href: '/data/colada', title: 'Pinia Colada' },
4445
{ href: '/data/i18n', title: 'Localization' },
4546
{ href: '/data/server', title: 'Server' },
4647
],

‎app/pages/data/colada.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script setup lang='ts'>
2+
const { catsFacts } = useCatsStore()
3+
const { d } = useI18n()
4+
</script>
5+
6+
<template>
7+
<div class="card">
8+
<h2>Pinia Colada</h2>
9+
<p>The Data Fetching layer for Pinia</p>
10+
<h3>Some facts about cats</h3>
11+
<div class="pt-4 w-1/2">
12+
<div v-for="item in catsFacts" :key="item.fact" class="card">
13+
<h2>{{ item.fact.replace(/ .*/, '') }} ...</h2>
14+
<span>{{ item.fact }}</span>
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<style scoped></style>

‎app/pages/index.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import AdvertiseBox from '@/components/AdvertiseBox.vue'
1313
Starter for Vue.js Development with Nuxt 3.
1414
</h2>
1515
<div class="gap-2 grid grid-cols-2 lg:grid-cols-3">
16-
<AdvertiseBox header="PrimeVue 4.2.x" icon="prime-check-circle" color="green-600">
16+
<AdvertiseBox header="PrimeVue 4.3.x" icon="prime-check-circle" color="green-600">
1717
Excellent <ExternalLink href="https://github.com/sfxcode/formkit-primevue" text="Component Library" /> for VUE
1818
</AdvertiseBox>
1919
<AdvertiseBox header="PrimeVue Theme" icon="prime-check-circle" color="green-600">
@@ -31,10 +31,10 @@ import AdvertiseBox from '@/components/AdvertiseBox.vue'
3131
<AdvertiseBox header="Typescript 5" icon="prime-check-circle" color="blue-400">
3232
Typesafe by default
3333
</AdvertiseBox>
34-
<AdvertiseBox header="Nuxt 3.15.x (Nuxt 4 ready)" icon="prime-check-circle" color="green-400">
34+
<AdvertiseBox header="Nuxt 3.16.x (Nuxt 4 ready)" icon="prime-check-circle" color="green-400">
3535
<ExternalLink href="https://nuxt.com/" text="Nuxt" /> with Pages, Layouts, ...
3636
</AdvertiseBox>
37-
<AdvertiseBox header="Nuxt Content 3.1.x" icon="prime-check-circle" color="green-400">
37+
<AdvertiseBox header="Nuxt Content 3.4.x" icon="prime-check-circle" color="green-400">
3838
<ExternalLink href="https://content.nuxt.com/" text="Content" />: Markdown, YML, CSV or JSON and MDC Syntax
3939
</AdvertiseBox>
4040
<AdvertiseBox header="Nuxt Modules" icon="prime-check-circle" color="green-600">

‎app/stores/cats.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export function useCatsStore() {
2+
const staleTime: number = 60 * 1000
3+
4+
const { data: catsFacts } = useQuery({
5+
key: () => ['cats-facts'],
6+
query: () => fetch('https://catfact.ninja/facts').then(res => res.json()).then((res: any) => {
7+
return res.data
8+
}),
9+
staleTime,
10+
})
11+
12+
return { catsFacts }
13+
}

‎nuxt.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export default defineNuxtConfig({
1515
'@nuxt/fonts',
1616
'@sfxcode/formkit-primevue-nuxt',
1717
'@unocss/nuxt',
18+
'@pinia/colada-nuxt',
1819
],
1920

2021
ssr: true,

‎package.json‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,39 +28,41 @@
2828
"@iconify-json/twemoji": "^1.2.2",
2929
"@nuxt/content": "^3.4.0",
3030
"@nuxt/devtools": "^2.3.2",
31-
"@nuxt/eslint": "^1.2.0",
32-
"@nuxt/fonts": "^0.11.0",
31+
"@nuxt/eslint": "^1.3.0",
32+
"@nuxt/fonts": "^0.11.1",
3333
"@nuxt/image": "^1.10.0",
3434
"@nuxt/test-utils": "^3.17.2",
3535
"@pinia/nuxt": "^0.10.1",
36-
"@primeuix/themes": "^1.0.0",
37-
"@sfxcode/formkit-primevue-nuxt": "^1.3.0",
38-
"@tiptap/extension-highlight": "^2.11.5",
39-
"@tiptap/extension-text-align": "^2.11.5",
40-
"@tiptap/extension-text-style": "^2.11.5",
41-
"@tiptap/pm": "^2.11.5",
42-
"@tiptap/starter-kit": "^2.11.5",
43-
"@tiptap/vue-3": "^2.11.5",
44-
"@unocss/eslint-config": "66.1.0-beta.7",
45-
"@unocss/nuxt": "66.1.0-beta.7",
46-
"@vitest/ui": "^3.0.9",
36+
"@primeuix/themes": "^1.0.1",
37+
"@sfxcode/formkit-primevue-nuxt": "^1.3.2",
38+
"@tiptap/extension-highlight": "^2.11.7",
39+
"@tiptap/extension-text-align": "^2.11.7",
40+
"@tiptap/extension-text-style": "^2.11.7",
41+
"@tiptap/pm": "^2.11.7",
42+
"@tiptap/starter-kit": "^2.11.7",
43+
"@tiptap/vue-3": "^2.11.7",
44+
"@unocss/eslint-config": "66.1.0-beta.10",
45+
"@unocss/nuxt": "66.1.0-beta.10",
46+
"@vitest/ui": "^3.1.1",
4747
"@vue/test-utils": "^2.4.6",
4848
"@vueuse/nuxt": "^13.0.0",
4949
"c8": "^10.1.3",
5050
"changelogen": "^0.6.1",
51-
"eslint": "^9.23.0",
51+
"eslint": "^9.24.0",
5252
"happy-dom": "^17.4.4",
5353
"jsdom": "^26.0.0",
54-
"nuxt": "^3.16.1",
55-
"sass": "1.86.0",
56-
"typescript": "^5.8.2",
54+
"nuxt": "^3.16.2",
55+
"sass": "1.86.3",
56+
"typescript": "^5.8.3",
5757
"unstorage": "^1.15.0",
58-
"vitest": "^3.0.9",
58+
"vitest": "^3.1.1",
5959
"vue-router": "^4.5.0",
6060
"vue-sidebar-menu": "^5.6.0"
6161
},
6262
"packageManager": "pnpm@9.15.3+sha512.1f79bc245a66eb0b07c5d4d83131240774642caaa86ef7d0434ab47c0d16f66b04e21e0c086eb61e62c77efc4d7f7ec071afad3796af64892fae66509173893a",
6363
"dependencies": {
64+
"@pinia/colada": "^0.14.2",
65+
"@pinia/colada-nuxt": "^0.1.1",
6466
"eslint-plugin-format": "^1.0.1"
6567
}
6668
}

0 commit comments

Comments
 (0)