Muhammad Mahmoud Comments - Answer Overflow

Muhammad Mahmoud

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

Nuxt UI v3 as layer

You're referencing the path directly (css: ['~/assets/css/main.css']) and that causes the error. You should refactor to use the code snippet kapa suggested. It's instructed in the Layers docs

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  css: [
    join(currentDir, './assets/css/main.css')
  ]
})

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  css: [
    join(currentDir, './assets/css/main.css')
  ]
})

11 replies

NNuxt

•Created by Ulrich on 11/14/2024 in #❓・help

Reactivity with UseFetch

Try using watch in useApi and pass filteredOptions to it.

const {data: annoncesData, status} = await useApi("/annonces/allPublic", {
  params: {
    ...filteredOptions,
    limit: 9,
    page: page
  },
  transform: data => {
    return data.data
  },
  watch: [filteredOptions], // <--- Try this
})

const {data: annoncesData, status} = await useApi("/annonces/allPublic", {
  params: {
    ...filteredOptions,
    limit: 9,
    page: page
  },
  transform: data => {
    return data.data
  },
  watch: [filteredOptions], // <--- Try this
})

9 replies

NNuxt

•Created by Ulrich on 11/14/2024 in #❓・help

Reactivity with UseFetch

You posted your custom $fetch and useFetch implementations. A snippet of using those in the Filters component could help more. But as I currently understand your question, you can create a computed variable (for example, refinedFilterOptions) that removes the empty values filterOptions and any other logic you want and pass that to the useApi composable. Whenver the value of refinedFilterOptions changes it will trigger re-fetching because its reactive.

9 replies

NNuxt

•Created by BraindeadDogge on 5/19/2024 in #❓・help

I18N problem

Make a reproduction

7 replies

NNuxt

•Created by BraindeadDogge on 5/19/2024 in #❓・help

I18N problem

The default folder is locales but you're using lang That's why it's failing. You should move your files into locales folder or change langDir to lang in i18n options

7 replies

NNuxt

•Created by MrFluffycloud on 5/7/2024 in #❓・help

vue-smooth-scroll on nuxt3?

Sorry I don't know 😅 maybe someone can help

7 replies

NNuxt

•Created by MrFluffycloud on 5/7/2024 in #❓・help

vue-smooth-scroll on nuxt3?

I haven't used the plugin before. Chefk the docs I think there would be an option

7 replies

NNuxt

•Created by MrFluffycloud on 5/7/2024 in #❓・help

vue-smooth-scroll on nuxt3?

I made a stackblitz playground and it works. Check it maybe you missed something? https://stackblitz.com/edit/nuxt-starter-qeq8it?file=app.vue

7 replies

NNuxt

•Created by Ulrich on 5/6/2024 in #❓・help

Nuxt UI + Nuxt Tailwind modules result in error

Remove tailwind module. Nuxt/ui already installs it

5 replies

NNuxt

•Created by Cody Bontecou on 5/6/2024 in #❓・help

Test Utils + Vitest + MSW - potential caching issue

Yeah the problem is with $fetch. Thanks I hope someone help you out with your problem

4 replies

NNuxt

•Created by Cody Bontecou on 5/6/2024 in #❓・help

Test Utils + Vitest + MSW - potential caching issue

Maybe unrelated a bit but isn't msw doesn't work correctly with nuxt (specificaly ofetch)? https://github.com/nuxt/nuxt/discussions/24519 https://github.com/unjs/ofetch/issues/295

4 replies

NNuxt

•Created by Muhammad Mahmoud on 5/3/2024 in #❓・help

Question about using SWR/ISR with user auth

Hmm I think I'll have to try out and see how it goes. Thanks

3 replies

NNuxt

•Created by Muhammad Awais on 5/1/2024 in #❓・help

State Management Advice

You could set the state in the parent component and use provide & inject to pass the state to all child components only and not global state.

3 replies

NNuxt

•Created by Ibrahim on 5/1/2024 in #❓・help

Tour package

Sure! provide a code snippet with the problem you're facing. Me and others will help If we could

4 replies

NNuxt

•Created by Ibrahim on 5/1/2024 in #❓・help

Tour package

https://driverjs.com/

4 replies

NNuxt

•Created by awacode on 4/26/2024 in #❓・help

Partytown with Vercel Analystics & Vercel Speed Insights

Partytown is used with external scripts only (Which you load by adding a script tag). Vercel analytics is an npm package and not an external script. A workaround (Haven't tried this before so not sure) would be uploading vercel analytics to some cdn and import that script with a script tag and add type='text/partytown'

5 replies

NNuxt

•Created by jenn2hi on 4/26/2024 in #❓・help

Prettier & ESLint in VSCode

I don't quite understand what you need. The tabs settings can be adjusted by prettier that didn't work with you?

9 replies

NNuxt

•Created by Nocteln on 4/28/2024 in #❓・help

access to something everywhere in the project

That's global state you want. You can do that by using useState in a composable like this for example

// composables/useMyState.ts
export default function () {
  const state1 = useState(() => 1)
  const state2 = useState(() => ({ foo: bar }))

  return { state1, state2 }
}

// composables/useMyState.ts
export default function () {
  const state1 = useState(() => 1)
  const state2 = useState(() => ({ foo: bar }))

  return { state1, state2 }
}

Then use it anywhere in the app

// components/Test.vue
<script setup>
  const { state1, state2 } = useMyState()
  console.log(state1) // Read
  state1.value = 2 // Update
</script>

<template>
  <p> {{ state1 }} </p>
  <p> {{ state2 }} </p>
</template>

// components/Test.vue
<script setup>
  const { state1, state2 } = useMyState()
  console.log(state1) // Read
  state1.value = 2 // Update
</script>

<template>
  <p> {{ state1 }} </p>
  <p> {{ state2 }} </p>
</template>

I find useState is enough for me but you can also see Pinia for more complex state managment

5 replies

NNuxt

•Created by reina on 4/27/2024 in #❓・help

File Upload Preview

You may want to log values to see what's wrong. Maybe you need to pass file.value[0] for example

7 replies

NNuxt

•Created by reina on 4/27/2024 in #❓・help

File Upload Preview

First you should use $fetch instead of useFetch as this is a user-interaction based. For Image previews you create a URL from your file value and then use that in your <template>

<script setup lang="ts">
const file = ref<FileList | null>(null);
const imagePreview = computed(() => 
  file.value ? URL.createObjectURL(file.value) : false
)
</script>

<template>
  <p> Uploaded Image Preview </p>
  <img src="imagePreview" />
</template>

<script setup lang="ts">
const file = ref<FileList | null>(null);
const imagePreview = computed(() => 
  file.value ? URL.createObjectURL(file.value) : false
)
</script>

<template>
  <p> Uploaded Image Preview </p>
  <img src="imagePreview" />
</template>

7 replies

Gaming

Programming