Using pinia-orm with Axios

The recommended way to combine pinia-orm with axios is the official @pinia-orm/axios plugin, which persists responses automatically and adds a request API to every repository. This recipe shows both the plugin and the manual approach for cases where you want full control over the request layer.

With the plugin

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createORM } from 'pinia-orm'
import { createPiniaOrmAxios } from '@pinia-orm/axios'
import axios from 'axios'
import App from './App.vue'
const pinia = createPinia()
pinia.use(createORM({
  plugins: [
    createPiniaOrmAxios({
      axios,
      baseURL: 'https://api.example.com',
    }),
  ],
}))
createApp(App).use(pinia).mount('#app')
<script setup lang="ts">
import { computed } from 'vue'
import { useAxiosRepo } from '@pinia-orm/axios'
import User from '@/models/User'
const userRepo = useAxiosRepo(User)
// Fetches /users and persists the response into the store.
userRepo.api().get('/users')
const users = computed(() => userRepo.all())
</script>

See also: Axios plugin usage for dataKey, persistBy: 'fresh', delete requests and custom actions.

Without the plugin

A thin service layer keeps requests explicit — persist the response yourself:

// services/userService.ts
import axios from 'axios'
import { useRepo } from 'pinia-orm'
import User from '@/models/User'
export async function fetchUsers () {
  const { data } = await axios.get('https://api.example.com/users')
  // The response replaces the store content; use save() to merge instead.
  return useRepo(User).fresh(data)
}
<script setup lang="ts">
import { computed } from 'vue'
import { useRepo } from 'pinia-orm'
import { fetchUsers } from '@/services/userService'
import User from '@/models/User'
fetchUsers()
const users = computed(() => useRepo(User).withAll().get())
</script>
Table of Contents