Joni
Joni
PostsComments
NNuxt
Created by Joni on 9/10/2024 in #❓・help
pinia custom plugin undefined
Thanks for trying to help me, I have a composable for a custom useFetch: 
import type { UseFetchOptions } from 'nuxt/app'

export function useApiFetch<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$apiFetch // use composable here instead?
  })
}
import type { UseFetchOptions } from 'nuxt/app'

export function useApiFetch<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$apiFetch // use composable here instead?
  })
}
You suggest creating another composable instead of the plugin?
7 replies
NNuxt
Created by Joni on 9/10/2024 in #❓・help
pinia custom plugin undefined
Thanks for the answer, unfortuantely its the other way around, pinia should wait for the plugin. I tried out your solution and $apiFetch is undefined I havent found anything to let pinia wait on other plugins
7 replies
NNuxt
Created by Joni on 9/10/2024 in #❓・help
pinia custom plugin undefined
Apparently its not initialized yet, even tho i named the plugin 01.apiFetch.ts - any solutions to this? 
const nuxtApp = useNuxtApp()
console.log(nuxtApp.$apiFetch);

nextTick(() => {
  const nuxtApp = useNuxtApp()
  console.log(nuxtApp.$apiFetch);
  
  nextTick(() => {
    const nuxtApp = useNuxtApp()
    console.log(nuxtApp.$apiFetch);
    
    nextTick(() => {
      const nuxtApp = useNuxtApp()
      console.log(nuxtApp.$apiFetch);
    })
  })
})
const nuxtApp = useNuxtApp()
console.log(nuxtApp.$apiFetch);

nextTick(() => {
  const nuxtApp = useNuxtApp()
  console.log(nuxtApp.$apiFetch);
  
  nextTick(() => {
    const nuxtApp = useNuxtApp()
    console.log(nuxtApp.$apiFetch);
    
    nextTick(() => {
      const nuxtApp = useNuxtApp()
      console.log(nuxtApp.$apiFetch);
    })
  })
})
undefined
undefined
undefined
async ƒ $fetch2(request, options) {
  const r = await $fetchRaw(request, options);
  return r._data;
}
undefined
undefined
undefined
async ƒ $fetch2(request, options) {
  const r = await $fetchRaw(request, options);
  return r._data;
}
7 replies
NNuxt
Created by Joni on 8/27/2024 in #❓・help
Have multiple layouts for one page depending on condition
Thank you guys, ofc i googled but didnt really know what to google... Thats the thing cuebit talked about 
<script setup lang="ts">
// You might choose this based on an API call or logged-in status
const layout = "custom";
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>
<script setup lang="ts">
// You might choose this based on an API call or logged-in status
const layout = "custom";
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>
And thats what akasection talked about 
<script setup lang="ts">
function enableCustomLayout () {
  setPageLayout('custom')
}
definePageMeta({
  layout: false,
});
</script>

<template>
  <div>
    <button @click="enableCustomLayout">Update layout</button>
  </div>
</template>
<script setup lang="ts">
function enableCustomLayout () {
  setPageLayout('custom')
}
definePageMeta({
  layout: false,
});
</script>

<template>
  <div>
    <button @click="enableCustomLayout">Update layout</button>
  </div>
</template>
5 replies
NNuxt
Created by Hendrik Jan on 8/15/2024 in #❓・help
Auto-import of /utils not working in VS-Code in template block
Thanks so much for this workaround!
14 replies
NNuxt
Created by Hendrik Jan on 8/15/2024 in #❓・help
Auto-import of /utils not working in VS-Code in template block
Ppl still have this problem right? (Cause I do)
14 replies
NNuxt
Created by Hendrik Jan on 8/15/2024 in #❓・help
Auto-import of /utils not working in VS-Code in template block
Hey there, i have the same problem, my utils files arent getting recognized by typescript. Im using Vuetify
14 replies
NNuxt
Created by Joni on 8/12/2024 in #❓・help
Proxy websockets `ws://nuxtserver/ws-api/xyz` → `ws://mysecretdomain/xyz`
So I've managed to find a solution, but there is definitely a nuxt/nitro bug on the very first connection, the first connection gets error 204 every other connection gets proxied
2 replies
NNuxt
Created by Joni on 3/3/2024 in #❓・help
Different highlighting depending on bun install and npm install
I just confirmed this in a different project, the error is gone with npm install!
2 replies
NNuxt
Created by Joni on 6/14/2023 in #❓・help
Nuxt prepare set dotenv path
Guess I need to remove postinstall from the package.json scripts
15 replies
NNuxt
Created by Joni on 6/14/2023 in #❓・help
Nuxt prepare set dotenv path
Thanks for clearance, problem is, I can't set a default value, since I dont know what domain/url this webpage and my backend will be hosted on
15 replies
NNuxt
Created by Joni on 6/14/2023 in #❓・help
Nuxt prepare set dotenv path
No description
15 replies
NNuxt
Created by Joni on 6/14/2023 in #❓・help
Nuxt prepare set dotenv path
Well it does something with env vars, since im using them in my nuxt.config.ts, bc of that I get the error Cannot read properties of undefined (reading 'length') in line 32:114 My env vars are in a folder above the actual nuxt project tho, that's why I added --dotenv ../.env to all of my package.json scripts
15 replies
NNuxt
Created by Joni on 6/14/2023 in #❓・help
Nuxt prepare set dotenv path
It does also fail with the --dotenv ../.env flag, removing the "postinstall": "nuxt prepare --dotenv ../.env" line in package.json lets npm install work without issues - so the actual problem is, that the prepare command doesn’t support the dotenv flag
15 replies
NNuxt
Created by Joni on 6/14/2023 in #❓・help
Nuxt prepare set dotenv path
idk exactly what it does, but when I do npm install, the npm run postinstall (fromthe package.json; nuxt prepare) gets called and the npm install errors. If that happens while starting my docker container and setting everything up, the frontend might fail
15 replies
NNuxt
Created by Joni on 6/14/2023 in #❓・help
Nuxt prepare set dotenv path
I don't want multiple .env files due to double occurrence of the same env var (Redundancy)
15 replies
NNuxt
Created by Joni on 6/14/2023 in #❓・help
Nuxt prepare set dotenv path
No description
15 replies
NNuxt
Created by Joni on 5/7/2023 in #❓・help
How to navigate inside pinia store?
After implementing the solution I posted above, you can call this.router.push('/') inside your actions of your store
13 replies
NNuxt
Created by Joni on 5/7/2023 in #❓・help
How to navigate inside pinia store?
Solution: https://pinia.vuejs.org/core-concepts/plugins.html#adding-new-external-properties plugin file looks like this: 
import { markRaw } from 'vue'
// adapt this based on where your router is
export default defineNuxtPlugin(() => {
  usePinia().use(({ store } : any) => {
    store.router = markRaw(useRouter())
  })
})
import { markRaw } from 'vue'
// adapt this based on where your router is
export default defineNuxtPlugin(() => {
  usePinia().use(({ store } : any) => {
    store.router = markRaw(useRouter())
  })
})
13 replies
NNuxt
Created by Joni on 5/7/2023 in #❓・help
How to navigate inside pinia store?
Hello thanks for your answer, this doesn't work tho, even typescript gives an error: 
Property '$router' does not exist on type '{ LOGIN: (_username: string, _password: string) => void; LOGOUT(): void; } & { _id: string; username: string; role: string; token: string; } & _StoreWithState<"auth", { _id: string; username: string; role: string; token: string; }, { ...; }, { ...; }> & _StoreWithGetters<...> & PiniaCustomProperties<...>'.ts(2339)
Property '$router' does not exist on type '{ LOGIN: (_username: string, _password: string) => void; LOGOUT(): void; } & { _id: string; username: string; role: string; token: string; } & _StoreWithState<"auth", { _id: string; username: string; role: string; token: string; }, { ...; }, { ...; }> & _StoreWithGetters<...> & PiniaCustomProperties<...>'.ts(2339)
13 replies