Here is my code
import { Appwrite, Query } from "appwrite";
export default defineNuxtPlugin((nuxtApp) => {
return {
provide: {
api: () => {
const api = new Appwrite();
api
.setEndpoint(useRuntimeConfig().app.endpoint) // Your API Endpoint
.setProject(useRuntimeConfig().app.project) // Your API project ID
;
return api
}
}
}
})
//path: /plugins/demo.js
I was looking for a way around using the runtime config in the /composables
directory and the **error: Nuxt instance unavailable**
kept popping up, so I thought why not make that function a plugin, since it's used almost everywhere.
But the plugin appears to always return null when used with useAsyncData
as shown below
//path: /pages/collections/[slug].vue
const { $api } = useNuxtApp();
const { data, pending, error, refresh } = await useAsyncData(`collectionsById-${route.params.slug}`, async () => {
const products = await $api().database.listDocuments(PRODUCTS_COLLECTION_ID)
const info = await $api().database.getDocument("62750820bc5ef93a8152", route.params.slug)
return {
info: info, /* Uncaught (in promise) TypeError: Cannot read properties of null (reading 'info') at setup ([slug].vue:20:1) */
data: products
}
})
The reason for all this is using the runtimeConfig
as it is not available in the /composables
. Is there a reason for the error info
is throwing?
And here is my code simplified
//path: /pages/collections/[slug].vue
const { $api } = useNuxtApp();
const { data, pending, error, refresh } = await useAsyncData(`collectionsById-${route.params.slug}`, async () => {
const products = await $api().database.listDocuments(PRODUCTS_COLLECTION_ID)
// const info = await $api().database.getDocument("62750820bc5ef93a8152", route.params.slug)
return products
})
In this code the data
return null