Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
# @funkwhale/api
## Installation
```bash
yarn add @funkwhale/api
```
## Node usage
Node does not implement [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). We need to polyfill it.
```ts
import { defaults, tracksList } from '@funkwhale/api'
import nodeFetch from 'node-fetch'
defaults.fetch = nodeFetch
defaults.baseUrl = 'https://funkwhale.instance.com/'
tracksList({ album: 1 }).then((response) => {
console.log(response.data)
})
```
## Browser usage
```ts
import { defaults, tracksList } from '@funkwhale/api'
defaults.baseUrl = 'https://funkwhale.instance.com/'
tracksList({ album: 1 }).then((response) => {
console.log(response.data)
})
```
## Vue 3 usage
```ts
// main.ts
import { createVueAPI } from '@funkwhale/api'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.install(createVueAPI({
instanceUrl: 'https://funkwhale.instance.com/'
}))
```
```vue
// App.vue
<script setup>
import { tracksList } from '@funkwhale/api'
import { ref } from 'vue'
const count = ref(-1)
tracksList({ album: 1 }).then((response) => {
count.value = response.data.count
})
</script>
<template>
<div v-if="count > -1">
Number of tracks in album: {{ count }}
</div>
<div v-else>Fetching tracks...</div>
</template>
```
### Changing instance url
You can update the instance url manually by accessing the library store directly.
```ts
import { store } from '@funkwhale/api'
store.instanceUrl = 'https://another.funkwhale.instance.com/'
```
### Automatic instance url
The default instance url is set to [`window.location.origin`](https://developer.mozilla.org/en-US/docs/Web/API/Location/origin). If that's the case you're looking for, you can simply do:
```ts
// main.ts
import { createVueAPI } from '@funkwhale/api'
// ...
app.use(createVueAPI())
```
### Vuex managed instance url
If the instance url is managed by vuex, you can use `createVuexAPI` to add a mutation handler
::: warning
You should not update the instance url manually as described in [Changing instance url](#changing-instance-url). Vuex may override the set instance url. Instead please use Vuex mutations.
:::
::: danger
For the plugin to work properly, you mustn't update the instance url directly on the state. You must use mutations to change it!
:::
```ts
// store.ts
import { createVuexAPI } from '@funkwhale/api'
const store = createStore({
// ...
plugins: [
createVuexAPI({
stateKey: 'url', // key of the instance url in store state
mutation: 'instance/setUrl' // mutation name
}),
// ...
]
})
```
## `@funkwhale/front` usage
The default options for `createVueAPI` and `createVuexAPI` are designed to work out of the box with `@funkwhale/front`.
```ts
// main.ts
import { createVueAPI } from '@funkwhale/api'
// ...
app.use(createVueAPI())
```
```ts
// store.ts
import { createVuexAPI } from '@funkwhale/api'
const store = createStore({
// ...
plugins: [
createVuexAPI(),
// ...
]
})
```