Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

How to make PageCard clickable except the footer

I'm using PageCard with footer like below but I cannot do anything in the button. It always goto the card url ``` <UPageCard to="https://github.com"...

Hybrid rendering with static hosting

Hello 👋 I'm struggling to make the following setup work the way I envision and would appreciate it if someone with more experience could point me to the right direction. I have a statically hosted application on Amazon S3 and CloudFront. All pages are client-side rendered except for the landing page - because of SEO. This is my routeRules configuration from nuxt.config.ts.:...

How to Disable the default Nuxt 3 SPA Loading Template?

I added these two configs in nuxt.config.ts { ssr: false, spaLoadingTemplate: false,...

H3Error: Cannot find module 'entities/lib/decode.js'

I have a server side nuxt error that starts with "H3Error: Cannot find module 'entities/lib/decode.js' ", there is more to it, this isn't the only module that can not be found. I need help understanding why this is and how to resolve this. This doesn't occur on the local npm run dev or the production build that is run locally. This error only occurs on the server when I run the .output/server/index.mjs file. I use pm2 start to start the server....

Is it possible to create the project from the Node docker image?

Hey all! I am trying to start up a project without installing node & npm on my machine, so I'm using docker, but I get an error when running the npm create command. ```terminal maz@maz:/media/maz/SSD/websites$ docker run node:alpine npm create nuxt@latest frontend...

Nuxt Auto-Imports and TypeScript Server interactions with subfolders help

Something I am trying to understand about auto-imports and Nuxt's file structure: I have a class with functions inside app/utils/Services/storage.service.ts, and I don't have Nuxt auto-importing sub-folders in app/utils/. I should just be able to manually import it with no issues, correct? I can compile my app just fine, but my TS server seems to be having issues. Example screenshot attached of behavior I am seeing...
No description

extending a layer having pinia stores results into getActivePinia() as soon as i try to use a store

both, the parent and the layer have @pinia/nuxt installed. Still, i can only use stores in the parent but not from the layer. The stores are being found, they are just not usable.

Getting import error even if files there and also included in `nuxt.config.ts`

using bun as per as the quickstart guide in nuxt4 getting the following error:
No description

Nuxt4 not responding with connect ECONNREFUSED nuxt-dev-3759.sock when using websocket on nitro

```ts ERROR [unhandledRejection] connect ECONNREFUSED nuxt-dev-4994.sock at PipeConnectWrap.afterConnect [as oncomplete] (node:net:1611:16) at PipeConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17)...
No description

Components preview

I am creating a custom nuxt module with some basic components. I have @nuxt/content docs website with @nuxt/ui, and I want to easily write a component code in the docs inside and then have it displayed nicely with the code with proper highlighting and working component on the other side. Nuxt ui docs have something similar, but it is very complex and I don't want to copy it, nuxt content docs have some too, but it is used only to showcase markdown rendering. Any ideas/suggestions how to do it?...

Config cache using routeRules without effecting inner paths

I'm trying to cache responses on the client with max-age 30 and stale-while-revalidate 30. The endpoint is /api/featureA/<id>. The UI page that makes the request for this endpoint also makes additional api calls to /api/featureA/<id>/something?param=value. How can I config routeRules that catches only /api/featureA/<id> but not handling the inner one?...

Missing code highlights

Hello! When I write
ts
ts
inside my app nuxt content docs it is colored properly, but when I do something like
const code = computed(() => {
return [
'
const code = computed(() => {
return [
'
ts',...

Help in migration to Nuxt 4, error in testing part

Hi, I havent found what is the correct architrcture for test folder and what would have changed in v4. After updating folder architacture the test completely fails with this error No test files found. You can change the file name pattern by pressing "p" include: */.{test,spec}.?(c|m)[jt]s?(x)...

nitro autoSubfolderIndex:false preview 404

When i set nitro autoSubfolderIndex:false ,and use generate and perview,in localhost:3000 any routes always 404. What else do I need to configure😢 export default defineNuxtConfig({ ...
No description

How to access environment variables of .env in pinia store in Nuxt 4

Currently in .env
TEST_APIKEY="TEST"
TEST_APIKEY="TEST"
...

Detected HTML unplugin-vue-i18n

```vue <script lang="ts" setup> const { t, locale } = useI18n(); <template> <h1 v-html="t('title')"></h1>...

WebStorm Syntax problems

Does anyone else have such major syntax problems with Jetbrains' WebStorm IDE? It often gives me syntax errors in places where there aren't any, and when I hover over them, nothing happens, and the website works fine. It's only displayed incorrectly in the IDE. I've had this problem for months, I update my IDE regularly, and somehow it won't go away.
No description

Nuxt Image IPX issues with Nuxt 4

Recently migrated an electron + nuxt project to Nuxt 4. SUddenly, after migrating, moving files, etc.. Nuxt Image, more particularily IPX cannot load files. On the browser, I get a 404 on every file from the public folder (located at app/public) (IPX_FILE_NOT_FOUND). I have no idea what could cause this. Tried switching the dir in the config of nuxt image to public, ~/public, app/public without success. Here is the repo where the code and structure is: https://github.com/TheDogHusky/nekoviewer...

Nuxt auth utils examples

Does there exist an nuxt auth utils example with a basic jwt token? I'm setting up a authentication flow with my own custom backend using asp net core identity