https://github.com/roma-marshall/vue3-api-pinia
The open source project example using the technology stack: Vue3, REST API + Pinia store
https://github.com/roma-marshall/vue3-api-pinia
pinia rest-api tailwindcss vue3
Last synced: 5 months ago
JSON representation
The open source project example using the technology stack: Vue3, REST API + Pinia store
- Host: GitHub
- URL: https://github.com/roma-marshall/vue3-api-pinia
- Owner: roma-marshall
- License: mit
- Created: 2024-06-18T10:10:45.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-30T10:28:47.000Z (almost 2 years ago)
- Last Synced: 2025-10-26T01:39:07.593Z (8 months ago)
- Topics: pinia, rest-api, tailwindcss, vue3
- Language: Vue
- Homepage: https://vue3-api-pinia.vercel.app
- Size: 38.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Mock REST API Service
Technology Stack used: Vue3, REST API and Pinia.
## Code snippets
1. Define Pinia in `store/pinia.js` and init the `data: {}` object
```javascript
import { defineStore } from 'pinia'
export const piniaStore = defineStore('counter', {
state: () => ({
data: {}
})
})
```
2. Fetch data from a REST API Endpoint and save it to Pinia store
```javascript
const fetchData = async () => {
// fetch data from endpoint
const response = await fetch('https://jsonplaceholder.org/posts', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
})
// write in pinia store
store.data = await response.json()
json.value = await store.data
}
```
3. Method `fetchData()` callback after the component `App.vue` has been mounted
```javascript
onMounted(() => fetchData())
```
## Recommended Installation
```
git clone https://github.com/roma-marshall/vue3-api-pinia
cd vue3-api-pinia
npm run dev
```
## License
MIT License