Kernel Panic Comments - Answer Overflow

ℹ page reload plugins/xcelerate.ts (x2)                                                                                                                                3:34:51 PM   
✔ Vite server hmr 5 files in 88.18ms
ℹ hmr update /pages/acb-dashboard.vue                                                                                                                                  3:35:52 PM   
✔ Vite server hmr 10 files in 107.671ms
ℹ hmr update /pages/acb-dashboard.vue (x2)                                                                                                                             3:36:29 PM   
✔ Vite server hmr 10 files in 111.273ms

ℹ page reload plugins/xcelerate.ts (x2)                                                                                                                                3:34:51 PM   
✔ Vite server hmr 5 files in 88.18ms
ℹ hmr update /pages/acb-dashboard.vue                                                                                                                                  3:35:52 PM   
✔ Vite server hmr 10 files in 107.671ms
ℹ hmr update /pages/acb-dashboard.vue (x2)                                                                                                                             3:36:29 PM   
✔ Vite server hmr 10 files in 111.273ms

42 replies

NNuxt

•Created by Kernel Panic on 11/5/2024 in #❓・help

How are custom fetches used on a large scale project?

{"data":null,"status":"error","error":{"message":"[nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables`.","statusCode":500}}

{"data":null,"status":"error","error":{"message":"[nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables`.","statusCode":500}}

That is what comes back from the useAsyncData composable

42 replies

NNuxt

•Created by Kernel Panic on 11/5/2024 in #❓・help

How are custom fetches used on a large scale project?

which leads me to think it is the loading pinia store in the plugin that is causing the issue:

onRequest({ options }) {
            const identityStore = useIdentityStore();
            const sessionIdKey = 'X-SessionId';
            options.headers = new Headers(options.headers);
            const sessionId = options.headers.get(sessionIdKey);
            if (!identityStore.session || sessionId) return;
            options.headers.set(sessionIdKey, identityStore.session.sessionID || '');
        },

onRequest({ options }) {
            const identityStore = useIdentityStore();
            const sessionIdKey = 'X-SessionId';
            options.headers = new Headers(options.headers);
            const sessionId = options.headers.get(sessionIdKey);
            if (!identityStore.session || sessionId) return;
            options.headers.set(sessionIdKey, identityStore.session.sessionID || '');
        },

I think it is the useIdentityStore that is the "composable"

42 replies

NNuxt

•Created by Kernel Panic on 11/5/2024 in #❓・help

How are custom fetches used on a large scale project?

in theory, that should work. But i still get " error [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables."

42 replies

NNuxt

•Created by Kernel Panic on 11/5/2024 in #❓・help

How are custom fetches used on a large scale project?

so i tried this directly on the page:

const { data, refresh, status, error } = await useAsyncData(async ({ $xcelerate }) => {
  return await $xcelerate('/api/ACBBatchStatu');
});

const { data, refresh, status, error } = await useAsyncData(async ({ $xcelerate }) => {
  return await $xcelerate('/api/ACBBatchStatu');
});

Sorry for the name change, was trying to keep it more generic but bashing my head against a wall here lol.

42 replies

NNuxt

•Created by Kernel Panic on 11/5/2024 in #❓・help

How are custom fetches used on a large scale project?

let me check quick

42 replies

NNuxt

•Created by Kernel Panic on 11/5/2024 in #❓・help

How are custom fetches used on a large scale project?

Thanks again for your help 🙂

42 replies

NNuxt

•Created by Kernel Panic on 11/5/2024 in #❓・help

How are custom fetches used on a large scale project?

and for some reason, just can't shake the "A composable that requires access to the Nuxt instance was called outside of a plugin, " error

42 replies

NNuxt

•Created by Kernel Panic on 11/5/2024 in #❓・help

How are custom fetches used on a large scale project?

- a custom fetch to deal with headers and auth session data - a store to hold related data and url for related end points - all calls to be async for speed on client side

42 replies

NNuxt

•Created by Kernel Panic on 11/5/2024 in #❓・help

How are custom fetches used on a large scale project?

In short, I need:

42 replies

NNuxt

•Created by Kernel Panic on 11/5/2024 in #❓・help

How are custom fetches used on a large scale project?

It's being called on the page

<script setup>
const statusStore = useStatusStore();
const { data, refresh, status, error } = await useAsyncData(async () => {
  return await statusStore.fetchAll();
});
</script>

<script setup>
const statusStore = useStatusStore();
const { data, refresh, status, error } = await useAsyncData(async () => {
  return await statusStore.fetchAll();
});
</script>

It is done this way to abstract away the need to pass the url on the page. All documentation that i come across is using the '/api/myEndpoint' kind of parameter within the page. If i can localise it to a store, like fetching data, posting data, saving data, all from within the same store, this would be ideal

42 replies

NNuxt

•Created by Kernel Panic on 11/5/2024 in #❓・help

How are custom fetches used on a large scale project?

Thanks for your assistance

42 replies

NNuxt

•Created by Kernel Panic on 11/5/2024 in #❓・help

How are custom fetches used on a large scale project?

I am suspecting it is in the custom fetch plugin that is causing the issue

42 replies

NNuxt

•Created by Kernel Panic on 11/5/2024 in #❓・help

How are custom fetches used on a large scale project?

Multiple calls are happening on this page - 5 in total. So i am using a Promise.all. But I have simplified it to resolve this error i keep getting.

42 replies

NNuxt

•Created by Kernel Panic on 11/5/2024 in #❓・help

How are custom fetches used on a large scale project?

Just loading the page, i get the error [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables. But when calling the "refresh" function it works as expected. So it only works on refresh, but i need it loaded async on client side

42 replies

NNuxt

•Created by Kernel Panic on 11/5/2024 in #❓・help

How are custom fetches used on a large scale project?

then on the page

<script setup>
const statusStore = useStatusStore();
const { data, refresh, status, error } = await useAsyncData(async () => {
  return await statusStore.fetchAll();
});
</script>

<script setup>
const statusStore = useStatusStore();
const { data, refresh, status, error } = await useAsyncData(async () => {
  return await statusStore.fetchAll();
});
</script>

42 replies

Gaming

Programming