Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

FAQ schema is considered as Question schema

I have a web page on my site for a blog, it has FAQs too at the end of the page, and hence, need to insert FAQ schema for the same. When I used the code snippet below, the schema.org site did not detect any FAQ schema only (please check screenshot 1). I'm using @unhead/schema-org package ```...
No description

use Set.prototype.difference()

Hi, I would like to use Set.prototype.difference() but it doesn't seem like it's available. I'd like to know if there is a way to somehow use it. Property 'difference' does not exist on type 'Set<string>' ...

Nuxt-auth-utils custom provider

Hello, I'm a bit confused about how to register my custom provider with nuxt-auth-utils. Thanks!...

Adding a watcher inside `useAsyncData`

Hi. I've wrapped useAsyncData in order to add some error handling: ```typescript async function myAsyncData<T>(...args: AsyncArgs<T>) { const { error, ...rest } = await useAsyncData<T>(...args);...

Nuxt X Supabase Oauth with Github

Hello everyone I try to allow my users to connect to my app with github but it doesn't work. I created a github app. I enable Github provider in supabase (with my client ID ...) ...
No description

Middleware http-only cookies validation

Hi! I am trying to validate cookies on my middleware following an http-only cookies authentication strategy to restrict access to certain routes for authenticated users. For non-authenticated users it works perfect but for authenticated users, if they directly type the url or reload the page when in a protected route, as cookies are http-only it doesn't send them and navigates to '/'. If i use useFetch with server: false, it does not interrupt navigation to the page itself for unauthenticated users, it denies access but once on the route, crashing the page. Also tried this, which results on hydration conflicts: ```javascript const nuxtApp = useNuxtApp(); const fetchFunction = nuxtApp.ssrContext ? useFetch : $fetch; ...

Best practices for state/composable to depend on fetched data?

I have a useUser composable that fetches API data to build the user: userInfo and companyInfo. I get the error that a composable is used outside the Nuxt instance. I want to know the best practices for implementing something like this, if anyone knows enough to help ...

Nuxt 3 Docs inaccessible

Hello. I am quite new to nuxt. I am not sure if it's just me, but I cant seem to access the nuxt3 documentation and other resources.
No description

nuxt-auth-utils^0.1.0: Cannot find package 'nitropack'

I am not sure why I am getting this error now. It worked fine for a few hours. ```bash [02:10:37] WARN [plugin node-resolve] Could not resolve import "nitropack/runtime" in A:\xxx\node_modules.pnpm\nuxt-auth-utils@0.1.0_magicast@0.3.4_rollup@4.18.1\node_modules\nuxt-auth-utils\dist\runtime\server\plugins\oauth.js using exports defined in A:\xxx\node_modules.pnpm\nitropack@2.7.2_ioredis@5.4.1_magicast@0.3.4\node_modules\nitropack\package.json. ...

How to use DefinitelyTyped types in a Nuxt 3 project?

I've been trying to use DefinitelyTyped types in my project multiple times but just cannot get it working. Is there an additional step that I need to do? 1. installed types for Google Maps with npm i @types/google.maps (https://www.npmjs.com/package/@types/google.maps) 2. in my script setup I try to import an interface like this: ```html...

Cannot iterate through list of items v-for , useAsyncData

<script setup lang="ts"> import type { Monster } from "~/types/dnd5e/monsters"; const { data: listOfItems } = await useAsyncData<Monster[]>('listOfItems', () => $fetch( /api/dnd5e/monsters`,...
No description

@ai-sdk/vue: How do I react to an error I catch inside `/api` in .vue file?

I am both new to vue and nuxt. How and where do I react to that error, i sent from the api endpoint now? I want to create a new toast message in the frontend on error. This is my code at /api/chat: ```ts import { StreamingTextResponse, streamText } from 'ai';...

DOM Refresh Problem

Hello guys, I've got a refreshing DOM problem with my code but I don't know where... This the part of code (1st screenshot), the template part (2nd screenshot) and the console.log(emojiContainer.value) in 3rd part. ...
No description

ModuleFederationPlugin

I have been asked to implement a ModuleFederationPlugin , I'm new to this all and I can't find any information on doing this with nuxt3. I am also using ssr: false if I add builder: 'webpack' or vite: false (stackoverflow) to the config it does not build. Any help appreciated please. I have tried this in nuxt.config.ts const { ModuleFederationPlugin } = require('webpack').container; export default defineNuxtConfig({ app: {...

Exposing ENV Variables for nuxt.config

Hey. Any suggestions on how to expose env variables in runtime? I've read about NUXT_ prefix, that works for runtimeConfig, but I need to expose the env variables I use in the nuxt config file itself. There I cannot use runtimeConfig unfortunately. Looking through the compiled files it seems like the process.env expressions are evaluated at build time....

Passing props vs `useNuxtData`

Hi, when do you prefer useNuxtData over passing props and vice versa? For example I have a ServiceEntity component that's been used for each row in a table. I'm curious if it'd be better to pass entities prop to each (like <ServiceEntity :entities="entities" />) or just directly using useNuxtData("service.entities") inside of the component.

Default theming for Nuxt UI Pro component

Hello, I am trying to set a default theme to a DashboardModal from nuxt ui pro. I would like the title to be larger than default but not having to set :ui to each of my dashboard modals. I tried to define my app.config.ts like this : export default defineAppConfig({...

How can I use my own composables inside a playwright test?

I replaced pinia with a custom composable "useSettings". In my playwright tests, I was able to access Pinia like this
window.__NUXT__?.pinia.myStore
window.__NUXT__?.pinia.myStore
Now when I try to use my composable inside my tests, I am getting the error "useSettings is not defined". How can I import it? 🤔...

new to Nuxt, are folders created manually after init?

I’m used to Next and Sveltekit, usually when I init a new project I start off with a pages/routes folder, src folder etc… however with nuxt I appear to start with files only, is this correct? If so, am I to create the pages and src folders and carry on as usual? Another question is regarding state, when should I learn Pinia? (Btw is this also used in vue??) seems like it’s the go-to for working with dynamic/reactive state, so I wondered if I should just go into it straight away, or learn the basics through the official docs first and then jump into it....

async Nitro middleware

Hey, can Nitro middleware be async? I'm trying to figure it out but I get Nuxt error 402 HTTP method is not allowed. when I make middleware async.