Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

i18n multiple files for each language

Hello, I would like to split my translations into several translations files to have them by page. I found this, the second answer (rated 1) looks good enough for me :...

Middlewares run before plugins are initialized?

Hey everyone. We're having a lot of trouble with our Nuxt instance, where seemigly middlewares can be running before plugins are fully initialized. Which in our case breaks pinia stores that are accessed in middlewares and other strange things. I even found this rather new bug report from someone else on https://github.com/nuxt/nuxt/issues/30824 Any ideas on this? Might this be a nuxt-internal bug?...
No description

Hydration Error with useAsyncData

Hey, I am running code like this: ...

Setting up a static multi page app

I can't find many resources on how exactly you should structure/develop an MPA with nuxt. I do not want to use vue-router or anything like that, and I want each endpoint of my site to end up as a static page as well. I'm currently stuck on how to render an endpoint (which I put at pages/index.html) at / on the dev server, but I don't know if I should use the pages folder at all if I'm not using the router.

Hosting Nuxt 3 Server API on Cloudflare: Pages, Workers, or Neither?

I built a simple API in the server directory of my Nuxt 3 project. The structure looks like this: ```// server/api/hello.ts export default defineEventHandler((event) => { return { hello: 'world'...

Type checking module with conditional imports

I have a module that conditionally calls addImports, depending on the Nuxt configuration. Type checking fails unless a configuration is passed that results in all those conditional addImport being executed. For example some plugins (that are also conditionally added using addPlugin) use imports that may not be present, so vue-tsc will fail. What's the normal way of getting around this so type checking can pass regardless of config?...

Excessive CSS in Nuxt3 with Tailwind: Unexpected Unused Styles

Hello everyone, I'm working on a project using Nuxt3 and Tailwind CSS. Everything is running smoothly, but I've noticed that the generated source code includes a very large amount of CSS. It seems that all of Tailwind's styles are being loaded instead of only the ones I'm using. Is this the expected behavior, or might I have misconfigured something? So I would like to know if the style in source code of this size in production is expected?...

TypeScript auto-import errors

How do I make TypeScript ignore the auto-imports?

Specify externals in nuxt module

Is it possible to add to the externals array passed to rollup to mark a dependency as external?

Nuxt prepack weird error

I'm getting a weird error when running npm run release in my project. It seems to be coming from npm run prepack but if I run that directly it works fine! It's only as part of the multi command release. ``` [12:46:04 PM] ERROR Cannot find module /github.com/nasontech/nuxt-fetch-transforms/dist/runtime/github imported from file:///github.com/nasontech/nuxt-fetch-transforms, file:///github.com/nasontech/, file:///github.com/nasontech/nuxt-fetch-transforms/_index.js, file:///github.com/nasontech/node_modules ...

prerender only after data loads

I load data on server side of my nuxt app. But on nuxt generate data just don't load before route rendering. How to wait for data to load and prerender routes only after this?

Toast config Nuxt UI

Cannot seem to get my Toast notifications to show anywhere but across the entire bottom of the screen... Is there some config I am missing? I am reading the docs and it seems this should work šŸ§ . Any help is appreciated! app.config.ts ```ts export default defineAppConfig({...

navigateTo doesn't work on client side while middleware is still running

I wanted to clarify what to do in this situation 1. page with button is rendered 2. button is clicked ...

Hydration error with i18n

We're facing hydration errors with nuxt-i18n, because the locale isn't set "fast enough" in a production build for our date formatting utilities. We use dayjs and we have a watcher for the locale switching in App.vue: ```ts const { locale } = useI18n() watch(locale, (newLocale) => {...

Security middleware does not work on prod but does work on dev

Hey! I just implemented the security module from Nuxt3 (https://nuxt-security.vercel.app/?utm_source=nuxt.com&utm_medium=aside-module&utm_campaign=nuxt.com). However, I encountered an issue where some features don't seem to work in my production (Netlify) environment. I tested it in my development environment, and there, it works fine. Not sure if it has something to do with ssr or Netlify. I am facing the following issues (config in a seperate comment):...
No description

It is Possible to exclude folder in /server/local/** to not build in npx nuxi build ?

I use /server/local to use to test my dummy data from REST API and use useFetch to /public to switching real other Host API. but, when build the live project the folder /server/local is included and i don't needed. How to not included it so the build output has smaller size ?

Extracting `useFetch` return type

Is there a better way of extracting the type my server route is returning from a route in vue side of the app? When I do
const { data } = useFetch('/api/public/metadata')
// data is globalThis.Ref<{ someComplicated: type; withMany: properties }> | undefined
const { data } = useFetch('/api/public/metadata')
// data is globalThis.Ref<{ someComplicated: type; withMany: properties }> | undefined
...

Module dependencies as dev only

Can my module dependencies that are only used in the main defineNuxtModule file be dev only? My module just generates a basically static (no imports) template in the buildDir and defines an auto import for that file

Getting Cookie From Middleware

export default defineNuxtRouteMiddleware(async (to, from) => { const isAuthenticated = useCookie('token') if((to.name === "login" || to.name === "register") && isAuthenticated.value) { console.log('user is logged in')...

How to forward logs to a Slack channel?

How can I send specific logs or all logs from a Nuxt 3 application to a Slack channel? Is there an integration for this? I do not want to use a paid tool like Sentry. Not all logs should be forwarded, only: - Errors (console.error)...