feat: update axios instances

src/Settings.vue

@@ -137,7 +137,7 @@ import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcDateTime from '@nextcloud/vue/components/NcDateTime'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 
-import axios from '@nextcloud/axios'
+import { ocs } from '@/axios'
 import { t, n } from '@nextcloud/l10n'
 
 export default {
@@ -319,11 +319,10 @@ export default {
       try {
         this.loading = true
         // Example GET -> /hello  (expects: { ocs: { data: { message: string, at: string }}})
-        const resp = await axios.get('/hello')
-        const data = resp.data?.ocs?.data ?? {}
-        this.serverMessage = data.message ?? '👋'
+        const resp = await ocs.get('/hello')
+        this.serverMessage = resp.data.message ?? '👋'
         // If backend returns ISO date strings, store a Date instance
-        if (data.at) this.lastHelloAt = new Date(data.at)
+        if (resp.data.at) this.lastHelloAt = new Date(resp.data.at)
       } catch (e) {
         console.error('Failed to fetch hello', e)
       } finally {
@@ -340,11 +339,10 @@ export default {
           items: this.items.map((x) => x.label),
           counter: this.counter,
         }
-        const resp = await axios.post('/hello', { data: payload })
-        const data = resp.data?.ocs?.data ?? {}
+        const resp = await ocs.post('/hello', { data: payload })
         // Update preview/message
-        if (data.message) this.serverMessage = data.message
-        if (data.at) this.lastHelloAt = new Date(data.at)
+        if (resp.data.message) this.serverMessage = resp.data.message
+        if (resp.data.at) this.lastHelloAt = new Date(resp.data.at)
       } catch (e) {
         console.error('Failed to save hello', e)
       } finally {

src/app.ts

@@ -1,13 +1,9 @@
 import App from './App.vue'
 import './style.scss'
 import { createApp } from 'vue'
-import axios from '@nextcloud/axios'
-import { generateOcsUrl } from '@nextcloud/router'
+import { http } from './axios'
 import router from './router'
 
-const baseURL = generateOcsUrl('/apps/nextcloudapptemplate/api')
-axios.defaults.baseURL = baseURL
-
 console.log('[DEBUG] Mounting NextcloudAppTemplate app')
-console.log('[DEBUG] Base URL:', baseURL)
+console.log('[DEBUG] Base URL:', http.defaults.baseURL)
 createApp(App).use(router).mount('#nextcloudapptemplate-app')

src/axios.ts

@@ -1,5 +1,14 @@
 import { generateOcsUrl } from '@nextcloud/router'
 import _axios from '@nextcloud/axios'
 
-const baseURL = generateOcsUrl('/apps/jukebox/api')
-export const axios = _axios.create({ baseURL })
+const baseURL = generateOcsUrl('/apps/nextcloudapptemplate/api')
+export const http = _axios.create({ baseURL })
+export const ocs = _axios.create({ baseURL })
+ocs.interceptors.response.use(
+  (response) => {
+    const ocsData = response?.data?.ocs?.data
+    response.data = ocsData ?? response?.data ?? null
+    return response
+  },
+  (error) => Promise.reject(error),
+)

src/settings.ts

@@ -1,8 +1,8 @@
-import { axios } from './axios'
+import { http } from './axios'
 import Settings from './Settings.vue'
 import './style.scss'
 import { createApp } from 'vue'
 
 console.log('[DEBUG] Mounting NextcloudAppTemplate Settings')
-console.log('[DEBUG] Base URL:', axios.defaults.baseURL)
-createApp(Settings).mount('#jukebox-settings')
+console.log('[DEBUG] Base URL:', http.defaults.baseURL)
+createApp(Settings).mount('#nextcloudapptemplate-settings')

src/views/AppView.vue

@@ -126,7 +126,6 @@
 <script>
 /**
  * Inner view rendered inside AppUserWrapper via <router-view>.
- * Matches your style: Options API, Nextcloud UI, axios, i18n placeholders.
  * Uses the Hello controller (GET/POST /hello).
  */
 import NcButton from '@nextcloud/vue/components/NcButton'
@@ -137,7 +136,7 @@ import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcDateTime from '@nextcloud/vue/components/NcDateTime'
 
-import axios from '@nextcloud/axios'
+import { ocs } from '@/axios'
 import { t, n } from '@nextcloud/l10n'
 
 export default {
@@ -251,8 +250,8 @@ export default {
       try {
         this.loading = true
         // GET /hello -> { ocs: { data: { message, at } } }
-        const resp = await axios.get('/hello')
-        const data = resp?.data?.ocs?.data ?? {}
+        const resp = await ocs.get('/hello')
+        const data = resp.data
         if (data?.message) {
           this.hellos.unshift({
             id: genId(),
@@ -279,8 +278,8 @@ export default {
           counter: 0,
         }
         // POST /hello -> { ocs: { data: { message, at } } }
-        const resp = await axios.post('/hello', { data: payload })
-        const data = resp?.data?.ocs?.data ?? {}
+        const resp = await ocs.post('/hello', { data: payload })
+        const data = resp.data
         const message = data?.message ?? `Hello, ${name}!`
         const at = data?.at ?? new Date().toISOString()
         this.hellos.unshift({ id: genId(), message, at })