Handling multiple modals.
How can we handle multiple modals within the Nuxt app. I have separate modals for signup, login, password reset and some other things. But I'm unable to manage them globally. I have tried
useState but it throws the error cannot stringify functions. Here are my implementations:
usemodal works as a controller for single modal
```
export const useModal = (closeOtherModals: () => void) => {
const isOpen = ref(false);...I need upload verification file without re-build nuxt app
I want to upload a temporary file for site verification in the root directory of the site.
This file should be under the public directory, but I don't want to put it in the source code and code repository because it needs to be repackaged.
I would like to add it to the already generated .output/public folder of the site and delete it after verification.
I have found that after packaging, a mapping is created for the public folder in the file .output/server/chunks/runtime.mjs where the variable assets is defined....
Nuxt-Stripe Guide / Example
I am reaching out for some emergency help. I have been lost trying to get Stripe to work on my Nuxt3 site. I was able to find the Nuxt-Stripe module that solved a lot of my problems, and I can now use the stripe client, but I still don't know how to do what I am trying to do. I am trying to setup a donation section and a shop from items listed in my Supabase database. Does anyone have an example or guide to what I am trying to accomplish? I am followed the Nuxt-Stripe github, the stack blitz exa...
Best way to save user context to avoid needing to fetch at every page?
What's the best, but mostly simple, way to save user context to avoid needing to fetch at every page?
The user context comes back from an API that I call server-side. Server Middleware helps me with the user context on the server-side, but I can't figure out how to replicate the same behavior for the pages/ directory...
Composable not defined
Hi everyone, I am new to nuxt and playing around with a simple project. I've created a composable:
```export const useRegions = () => {
return [{
slug: "region1",...
Example of Edit Dropdown
Hey'all, i'm currently looking for a UDropdown model to use in my table. the dropdown should have edit and delete options; edit should open the edit model declared on parent and delete should call delete function also on parent. I have few experience with nuxt3/composition api, how do you aproach this situations?
```
<UTable
:columns="columnsTipoDocumento"...
multiple queries in useFetch how to batch update the queries so that api hit only once
I am new to nuxt i and working on it from last 2 months.
I am using useFetch to fetch data
```...
nuxi update
should nuxt be installed as a regulard or dev dependency? I previously had it as a regular dependency, but after running the recommended nuxi update command it ended up as a dev dependency
How to stop Nuxt from preloading in dev mode?
Dev mode preloads and applies all kinds of stylesheet that I don't want to be preloaded. I'm trying to get rid of that, but can't find a way.
I relented to manipulating the head directly, but can't find a way to do that either!
- useHead seems to have no way of removing elements. ...
vue3-runtime-template SSR
I'm using Storyblok as a CMS on a Nuxt 3 site.
We have just upgraded from Nuxt 2 where we used vue-runtime-template to dynamically compile the rich text field HTML which includes Vue components by setting Nuxt to use the runtime compiler in the
build key in the Nuxt config.
On Nuxt 3, we set vue.runtimeCompiler to true in the config, and use vue3-runtime-template but this only tells Nuxt to use the runtime compiler on the client, not the server. The content is only rendered on the client, which defeats the object of using Nuxt in the first place, which is to get SSR....Use incoming event type in defineEventHandler
I want to run some custom logic using a function that takes the event from an event handler in a
.post.ts file:
```js
export default defineEventHandler(async (event) => {
const handledEvent = handlePlayerSearchEvent(event);...Nuxt Image: IPX_FILE_NOT_FOUND
I have installed Nuxt Image module which works fine in dev mode, but not on production server.
Production server is Ubuntu / Nginx.
https://domain.com/_ipx/w_32/images/32955/i.jpg...
defineCachedEventHandler - set maxAge from environment variable
Hi everyone, I'm trying to figure out how to set my
maxAge value from my config because I want it to be different in staging vs production:
```
export default defineCachedEventHandler(async (event) => {
const config = useRuntimeConfig()...Did you mean to import "ignore/index.js"? ELIFECYCLE Command failed with exit code 1
Hello I am encountering this error while running pnpm install ,what should be done ??
...
noindex a whole page directoru
is there a way to noindex a whole page directory in nuxt3? currently we are adding noindex to useHead on every page we dont want indexed
page
---dir1 (we want to noindex this dir1 and all pages under it dir1/** )
---dir2...
Element ref() returning undefined when called in onMounted() after route update [SSR]
This is a long story that involves nuxt/I18n and FormKit, but I have finally found the culprit and realised that perhaps I have a gap in my understanding of refs and reactivity.
reproduction here: https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-xnuzhm?file=pages%2Findex.vue
You'll need to use the browser console to see what's happening and click the button after changing locales.
...
@nuxt/icon custom collection from public folder??
hi all,
Our server bundle size is massive caused by nuxt icon. i guess it is because it includes all our svgs files as custom collections.
Is it possible to have custom collections with svg files that are located under the public folder so that they do not get part of the bundle size?
How would i need to configure this?
At the moment they cannot be loaded...
Nuxt & Wordpress
Hello friends, I'm in a project using Nuxt and Wordpress as a headless CMS.
I need to implement ACF plugin , Yoast SEO / RankMath SEO plugin in wordpress. I will use the WPGraphQL plugin to extract data from posts, comments, used plugins from wordpress.
I read these references about how to implement Nuxt, Wordpress, WPGraphQL plugin, ACF plugin, Yoast SEO / RankMath SEO plugin. ...
Can't get relative paths in `nuxi generate`
When generating a static page with
nuxi generate, the resulting files all have absolute references to each other. How I can generate a page with relative paths so that the resulting folder can be uploaded anywhere?How do you refresh a fetch with a dynamic path (/api/page/[id])
I have a hard time understanding that doc https://nuxt.com/docs/getting-started/data-fetching#computed-url
Basically I have a fetch
{data, refresh} = useFetch("/api/${dynamicID}") (<- I know it’s suposed to be )
but when I refresh the dynamicID doesn’t change which is normal... but what’s the workaround (note that I can’t use watch because it’s on immediate: false` and I need to refresh it on cue) ?...