Dynamic baseUrl in i18n config in nuxt.config.ts
Hello! i am trying to use a dynamic baseUrl, passing a function, but it throws that it is not serializable, could someone help me to fix it?
This is my code:
```typescript
i18n: {
vueI18n: 'i18n.config.ts',...
nuxt ui make popover content full screen width on mobile like modal
How should i go about making the Upopover component responsive on mobile currently i did this on the #content section of it " <template #content>
<div class="flex flex-col w-[450px]">' which is what i want on desktop or as the max width. buton mobile it should max out at the screen width like the modal component does...
Nuxt Server Middleware
I have a nuxt Server Middleware, that restricts site access by IP.
The problem is that during SSR render, there are some calls as well, and this middleware runs 2-3 times.
There is way to understand that the call is "internal"?...
Module middleware doesn't work in build mode
Hi, I'm trying to build a npm package that would plug into nuxt at the server-side level and watch every GET request to run some analytics
so far I've limited myself to just console logging to check if requests are intercepted in the right way
I don't understand why but everything works fine in dev mode, however as soon as I build not a single request is caught, i don't see the console logs anymore, it feels like the middleware is not packaged into the build...
Route prefix for layers
is there any way to prefix layer routes ?
each layers has their own page router system, but in order to avoid collision on names i would like to add a route prefix for each layer... is this possible ?
The only way I found is to create a directory in the layer's pages dir....
Issue upgrading from 3.16.2 to 3.17.4
No matter what I do nothing loads and I get the following error:
...
requested module '/_nuxt/@id/virtual:nuxt:....nuxt%2Fnuxt.config.mjs' does not provide an export named 'granularCachedData' (at asyncData.js:10:29)
requested module '/_nuxt/@id/virtual:nuxt:....nuxt%2Fnuxt.config.mjs' does not provide an export named 'granularCachedData' (at asyncData.js:10:29)
nuxt ui navbar highlight top level pages as active when their children are active?
So I'm using the nuxt ui navigation menu and i have a page say at "/store' as the top level of that navigation menu and another page called "/store/garden" Ideally when i'm on the /store/garden page i want the top level parent in navigation menu to still be highlighted as active and not only when im on the /store page. is there a way to achieve this behaviour?
useFetch return null sometimes
Hello! I have a call to my backend
```
const headers = useRequestHeaders(['authorization'])
const { data, status, error } = await useFetch('https://localhost:7225/mybackend', { headers,lazy: false, server:false})...
runtimeConfig is empty
```ts
runtimeConfig: {
// The private keys which are only available within server-side
apiSecret: '123',
// Keys within public, will be also exposed to the client-side...
Recommendation for ESLint Globals with Nuxt
Working on setting up ESLint for a nuxt project. Had an old version and migrated to ESLint 9 with the new flat config. I integrated prettier and used Nuxt ESLint.
Nuxt ESLint mentions that it is project-aware flat config that I can then add to. This is set up with
export default with Nuxt which I did. I was hoping this would fix ESLint complaining about things built into Nuxt, and globally available not being defined such as $nuxt, $fetch, etc as well as potentially my composables that are exported and globally available. It looks to have addressed some such as $nuxt and $fetch, so I no longer have to list those in the languageOptions, globals of my eslint.config.mjs. But several things such as useCookie, useFetch, navigateTo, useRuntimeConfig are still not defined and give an error on linting, same with all of my composable functions.
Is there a better way to handle this or do you have to just add everything you want defined in the ESLint or manually import each of these things into each .vue file that is using them?...nuxt ui calendar set default date to specific date when using v-model
I have a UCalendar and i want to set the default date to a specific date, however im also using v-model. I only want this default to be in the calendar instead of the default which is today by default. can i do this without it setting the v-model to that date?
Using Layers for different UI frontends
I want to use layers to create 3 apps that function basically the same but with 3 different colour schemes and some different name branding. What would be the best way to go about that using nuxt 3 and layers?
[Vue warn]: Component <Anonymous> is missing template or render function.
Hi guys!
I have multiple warnings in Nuxt - because of the spline-viewer... not sure why I got them... I created spline-viewer.clitent.ts plugin + added rule in nuxt.cfg
`export default defineNuxtConfig({...
nuxtjs/i18n Not generating index in ‘'prefix’' mode
nuxtjs/i18n during prerender with 'npm run generate' fails to generate index with redirect to 'defaultLocal'
Text colors in theme
The css classes
text-primary or text-dimmed are not defined in my project. but it works with the CSS variables text-(--ui-primary) and text-(--ui-text-dimmed). Where are the css classes?webpack build fail
config:
export default defineNuxtConfig({
compatibilityDate: '2024-11-01',
devtools: { enabled: false },
builder: "webpack",...
server/api/[route].ts doesn't work with dynamic route
I use Nuxt3 with Laravel to separate frontend/backend.
I catch every GET api routes with
server/api/[route].get.tsexcept auth routes.
However,when I use dynamic route such as /api/users/${id}, that route is considered as location in Nuxt3,not API route to Laravel.
Nuxt 3.15.4...country picker input
in the nuxt ui docs there's a country picker example which lazy loads the countries from /api/countries.json i want a country picker in my form in a modal which is rarely opened. should i just keep the countries list in the component directly or is this a better approach like in the docs where they're lazy loaded from the server route? what are the pros and cons in this context I feel like storing them directly in the component would be faster not requiring that api call?
404 page not found content pages unless i hard refresh page
I have a few nuxt content pages like a privacy-policy however if i navigate using a nuxtLink to these pages i get an error 404, if i refresh my browser it however works and fidplays my page. what's the recommended solution to this? I have a catch all page [...slug].vue for rendering these pages do i need to manually specify their urls?
Close fullscreen UModal by clicking on overlay
I can't figure out how to dismiss a UModal in fullscreen except with the close button or esc key