Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

How can I detect specific page in layout?

I have a marketing.vue layout that wrap all pages, this layout contains Navigation.vue component which has float menu, on some pages I need to turn off the float effect, how I can do that?

How can I generate a tag cloud from a custom Nuxt Content

Hi everyone, I'm currently using Nuxt Content and have defined a custom schema that includes a tags field with the type z.array(z.string()). On the frontend, this seems to be interpreted as a string[], but under the hood, it appears that the data is stored in the database as a text field with a JSON dump of the array. ...

Nuxt3: Using node version below 18

Hi community! Is it possible to use Nuxt 3 with node version below 18? I'm trying to run nuxt app on older ubuntu version (v18). However, ubuntu does not support node version above 18 due to glibc incompatibility. I could either:...

Nuxt UI - Responsive Model/Drawer

Hey guys, how would we implement this responsive model with Nuxt UI. https://www.shadcn-vue.com/docs/components/drawer.html...

what is the requireJs alternative?

I have a dependency called videojs that needs global/window. however that doesn't exist and I found an issue (https://github.com/videojs/video.js/issues/5680#issuecomment-570120497) that shows a fix but it requires requirejs....

kbd multiple keys

Hey, does Ukbd in ui3 not support things like ctrl_k like defineShortcuts has?

Fresh nuxt3 install weird inline styles issue

Hello, Today I started a new nuxt3 project but I noticed that my tailwind utility classes were not applied. I did investigate and it turns out there is an inline style which is taking priority. I have absolutely no idea where it comes from. I tried to create several projects with as few modules as possible. Just nothing but pnpm create nuxt test and the problem occurs. I also tried on edge where i have no extensions to see if that could be the issue but it is not... Then I tried to set the future: { compatibilityVersion: 4} and the problem was gone. But i'm not willing to commit to this flag for a production project. Then i also tried ...
No description

defineProps not auto imported?

I am new to Nuxt and Vue. I have setup a new Nuxt v3.16.1 project. Created a default.vue layout with some additional components. However, when I try to use defineProps, I am receiving the following error message: Cannot find name 'defineProps'. ```...

Need Help with `@nuxt/eslint` + Prettier + TypeScript Rules (Nuxt 3 + Tauri)

Hi everyone,
I'm working on a Nuxt 3 + Tauri project (initially based on the nuxtor template but with significant modifications). I'm trying to properly configure @nuxt/eslint with Prettier while ensuring that TypeScript rules are correctly applied, but I'm running into some issues.
Project Setup: ...

@nuxt/fonts layout shift

@kapa.ai i'm seeing a layout shift when force- reloading a project that uses @nuxt/fonts and the font "inter" with ctrl+f5 on a production package. Shouldn't @nuxt/fonts prevent this on common fonts? what could be reasons for this?...

Chat bot kapa.ai

@kapa.ai how i can set background tcolor ransparent in a page

Weird date error with callender element

```html <template> <div class="mt-8 ml-8"> <div class="flex flex-col w-fit"> <span class="text-white">Dates</span>...
No description

Auth middleware not redirecting

I'm using nuxt-auth-utils and everything in my middleware works exept the redirect itself. I even get the "DUMMY REDIRECT" in the console. I've even tried with await, return, await return. abortNavigation() also does nothing. Why is that? auth.global.ts ```js export default defineNuxtRouteMiddleware((to, from) => {...

Explicit import from local Layer

Hi! I am migrating a Nuxt app to a layered architecture because we want to create a second application with a lot of the same core code, just some pages that are different. I migrated the folder structure to the following: - pnpm-workspace.yaml - package.json - packages...

useAsyncData with pinia

I was reading through the documentation on useAsyncData and I noticed that it mentioned:
useAsyncData is for fetching and caching data, not triggering side effects like calling Pinia actions, as this can cause unintended behavior such as repeated executions with nullish values. If you need to trigger side effects, use the callOnce utility to do so.
with the following example: ```ts const offersStore = useOffersStore()...

Websocket "unknown" type in typescript app

I have this plugin, and I want to use the send functionallity on components. I also want to add others later on (subscribe to topic etc). ```javascript import { defineNuxtPlugin } from "#app"; export default defineNuxtPlugin(() => {...
No description

Mocking a plugin

Is it possible to mock a plugin which is imported using useNuxtApp() in a component which is being unit tested?

useFetch not updating data ref when new request is triggered.

This is my simplified version of composable ```ts const projectCache = () => useState("projectCache", () => ref({})) const useProject = async (projectId: Ref<string>) => {...

[Solved] Storing a user object globally

Greetings! I want to store a user object globally after parsing a JWT in a server plugin, and I seem to only get this partially right. Why am I doing this? Because where my Nuxt app is deployed, authentication happens before the web traffic reaches the Nuxt app. In the request I can see a header with the JWT that has the user info. What I want to happen (which I accomplished easily in Flask in my previous website) is: 1. before any page loads, check if there is a user already in a context/global object. If so, continue. If not, we need to check the request header. 2. parse the JWT in the request header...

Improval of Scrol-Saver

Hello, I got this code: ```ts export default defineNuxtPlugin((nuxtApp) => { const router = useRouter(); ...
Next