Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit f84582f

Browse filesBrowse files
committed
feat(pinia): Add pinia-colada sample
1 parent 05a4322 commit f84582f
Copy full SHA for f84582f

File tree

7 files changed

+1608
-1499
lines changed
Filter options

7 files changed

+1608
-1499
lines changed

‎app/composables/navigation.ts

Copy file name to clipboardExpand all lines: app/composables/navigation.ts
+2-1
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

Copy file name to clipboard
+20
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

Copy file name to clipboardExpand all lines: app/pages/index.vue
+3-3
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

Copy file name to clipboard
+13
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

Copy file name to clipboardExpand all lines: nuxt.config.ts
+1
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

Copy file name to clipboardExpand all lines: package.json
+20-18
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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.