N
Nuxt•2mo ago
Matthew 🦘🫕

Job Posting Board Help

Hey, I'm trying to create a Job Posting Board and I'm not sure what is the best Nuxt way to get the complex data types and store in it in a State/Cache so I can create a Filter for when people want to search for different jobs.
I was thinking of just using @HugoRCD 's project as a guide because I think it follows best practices! and I love all of his design work https://github.com/HugoRCD/shelve/tree/main/apps/shelve/app/composables
GitHub
shelve/apps/shelve/app/composables at main · HugoRCD/shelve
Open-source secret & environment management. Secure, simple, collaborative. CLI & Github Sync - HugoRCD/shelve
No description
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Matthew 🦘🫕. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To build a Job Posting Board in Nuxt and efficiently manage complex data types for filtering/searching, the recommended Nuxt approach is to use the built-in state management composable, useState, or leverage a third-party library like Pinia for more advanced needs. Using useState for Shared State Nuxt's useState composable allows you to create a reactive, SSR-friendly shared state that is accessible across your components. This is ideal for caching your job data and enabling fast, client-side filtering: 
// composables/useJobs.ts
export const useJobs = () => useState('jobs', () => [])
// composables/useJobs.ts
export const useJobs = () => useState('jobs', () => [])
You can then fetch your job data (e.g., from an API) and store it in this state, typically in your app.vue or a layout, using callOnce to avoid duplicate fetches: 
<script setup lang="ts">
const jobs = useJobs()

await callOnce(async () => {
  jobs.value = await $fetch('/api/jobs') // Replace with your API endpoint
})
</script>
<script setup lang="ts">
const jobs = useJobs()

await callOnce(async () => {
  jobs.value = await $fetch('/api/jobs') // Replace with your API endpoint
})
</script>
Now, any component can access and filter jobs.value reactively. This approach is similar to how you might have used Vuex in Nuxt 2, but is more streamlined and SSR-friendly in Nuxt 3 State Management. Filtering For filtering, simply use computed properties in your components to derive filtered lists from the state: 
const searchTerm = ref('')
const filteredJobs = computed(() =>
  jobs.value.filter(job => job.title.includes(searchTerm.value))
)
const searchTerm = ref('')
const filteredJobs = computed(() =>
  jobs.value.filter(job => job.title.includes(searchTerm.value))
)
Using Pinia for More Complex State If your state logic grows (e.g., you need actions, getters, or modular stores), Nuxt recommends using Pinia, which is officially supported and integrates well with Nuxt's SSR and reactivity systems State Management: Usage with Pinia. Summary - Use useState for simple, shared, SSR-friendly state. - Use Pinia for more complex state management needs. - Store your job data in state and use computed properties for filtering. - Fetch and cache your data at the app or layout level for best performance. If you want to see real-world examples, you can check out the Nuxt state management docs. The knowledge sources do not provide details about the specific GitHub project you mentioned, but the above approach follows Nuxt best practices. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@331741039947939841> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Matthew 🦘🫕
Matthew 🦘🫕OP•2mo ago
Okay that sounds good but what is the difference between useNuxtData and Nuxt State? Also how do I ensure I can return the correct types from useState? or $fetch?

Did you find this page helpful?