Kernel Panic Posts - Answer Overflow

Kernel Panic

Posts Comments

NNuxt

•Created by Kernel Panic on 4/23/2025 in #❓・help

Can't seem to access deeply nested object from async pinia store method

10 replies

NNuxt

•Created by Kernel Panic on 4/15/2025 in #❓・help

How to prevent duplicate API endpoint calls being made from within a component?

In a summary, these are the related factors: - Page containing component and uses default layout, - Component within page uses pinia store to fetch data via useAsyncData - Pina store loaded in the component and retrieves data via a custom fetch - Plugin adds a custom fetch and used in the pinia store - Default layout that has the page content if not loading, or loading spinner if loading (loading is determined from loading pinia store) - loading store that triggers a loading spinner in the layout When the component fetches the data via useAsyncData, the call repeats itself. Even if i use a key, it is still repeating itself. It does successfully fetch the data, however it is always fetching it twice. I believe this could be due to the loading spinner on the layout page which causes a re-render. It is preferred that the data is loaded on the client side, so a loading spinner was implemented. Is this a good approach? Is there a better approach? Possible examples somewhere I can learn from? How can I prevent duplicate calls from being made, and preferably not a hack, but setting this all up the right way. Thank you.

7 replies

NNuxt

•Created by Kernel Panic on 2/10/2025 in #❓・help

Updating props before binded

In this project, form controls have permissions that are received from call to an API endpoint. I have somewhat gotten this concept right, however, the permission only seems to be applied on a re-render. A "screen-key" is sent to the backend, the backend returns with an array of screen-keys (for form controls) and applies related permissions (AKA availability). Eg. disable, readonly, hidden, etc. I have a custom form component that takes a screen-key as a prop. If this screen key exists, it fetches the data from the backend and stores it in a hashmap. The form component uses "provide" to provide it's own screenkey to any child form control components. Using "inject", a form control gets the parent's screenkey and, along with its own screenkey via props, queries a pinia store for its availability. This availability is returned, ammended to props (amendedProps = {...props, ...availability}) to which this is v-binded to the form control. (I have also tried using computed) The problem, however, is that while this does work, it does not work on the first render. It seems that it needs to be re-rendered for it to take effect and I'm not sure how to fix this.

5 replies

NNuxt

•Created by Kernel Panic on 1/12/2025 in #❓・help

Vuetify Reset CSS

Good day I have the latest nuxt version and have added Vuetify module. I have followed the docs found here https://nuxt.vuetifyjs.com/guide/sass-customization.html#overriding-sass-variables However, I still cannot disable the reset css. I have tried both true and false, but it still does not work.

12 replies

NNuxt

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

How are custom fetches used on a large scale project?

How are custom fetches used on a large scale project? I have read the custom fetch documentation on the Nuxt website. That and data-fetching. However, unless I missed something, I am struggling to put this into a large scale project. I currently have a pinia store, that uses a composable, that uses a plugin, that implements a custom fetch. While this does work to get the data, I can't seem to use useAsyncData with it, because I get an error if I try: "[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" It's difficult to paste all of the code here because it is for my work project and client confidentiality and all that. In a nutshell, i'm trying to find a working solution where I can use a custom fetch, don't have to state the url in the page where the data is being fetched but instead it already being available a composable (eg. in the bookStore pinia store, I use an useMyApi composable which provides a fetchBooks function, which calls an endpoint using the custom fetch) An example:

<script setup lang="ts">
const { data } = await useFetch('/api/data')

async function handleFormSubmit() {
  const res = await $fetch('/api/submit', {
    method: 'POST',
    body: {
      // My form data
    }
  })
}
</script>

<script setup lang="ts">
const { data } = await useFetch('/api/data')

async function handleFormSubmit() {
  const res = await $fetch('/api/submit', {
    method: 'POST',
    body: {
      // My form data
    }
  })
}
</script>

becomes:

<script setup lang="ts">
const myStore = useMyStore();
const { data } = await myStore.fetchBooks();

async function handleFormSubmit(values) {
  const res = await myStore.saveBook(values);
}
</script>

<script setup lang="ts">
const myStore = useMyStore();
const { data } = await myStore.fetchBooks();

async function handleFormSubmit(values) {
  const res = await myStore.saveBook(values);
}
</script>

42 replies

NNuxt

•Created by Kernel Panic on 10/18/2024 in #❓・help

Dealing with useFetch / useAsyncFetch with headers and baseUrl

I am a bit of a newbie to Nuxt. I want to create a custom fetch but with the love that comes with useFetch in terms of caching and the other bits of extras. If i use useFetch, i can load it in setup, but not as a user action. For the user action, i would need $fetch if i am understanding it correctly. I've read the documentation, created my own custom fetch. But would love to try extend the caching ability. Is this possible? I'm considering using Pinia as a "cache" but not sure if this is the right approach. Any and all tips are welcome

11 replies

Gaming

Programming