Zampa Posts - Answer Overflow

Zampa

Explore posts from servers

•Created by Zampa on 7/18/2024 in #❓・help

Adding `/pages/index.vue` breaks e2e testing

Reproduction: https://stackblitz.com/edit/github-gu1sj1-xq3xf8?file=tests%2Fe2e%2Fbasic.e2e.test.ts A minimal repo with just vitest and @nuxt/test-utils, an app.vue, and a pages/index.vue fails with error:

❯ npm run test

> test
> vitest

Running with compatibility version `4`

 DEV  v1.6.0 /home/projects/github-gu1sj1-xq3xf8/app

 ❯ ../tests/e2e/basic.e2e.test.ts (1)
   ❯ basic (1)
     ⠹ [ beforeAll ]
     · contains Welcome to Nuxt! string

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  ../tests/e2e/basic.e2e.test.ts > basic
Error: Cannot find any nuxt version from ./app
 ❯ Module.loadNuxt ../node_modules/@nuxt/kit/dist/index.mjs:2729:11
 ❯ loadFixture ../node_modules/@nuxt/test-utils/dist/shared/test-utils.C7cWLW4C.mjs:102:14
    100|   });
    101|   const buildDir = ctx.nuxt.options.buildDir;
    102|   if (!existsSync(buildDir)) {
       |              ^
    103|     await promises.mkdir(buildDir, { recursive: true });
    104|     ctx.teardown = ctx.teardown || [];
 ❯ setup2 ../node_modules/@nuxt/test-utils/dist/shared/test-utils.C7cWLW4C.mjs:178:7

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests   (1)
   Start at  09:54:14
   Duration  4.84s (transform 445ms, setup 45ms, collect 2.14s, tests 5ms, environment 0ms, prepare 807ms)

❯ npm run test

> test
> vitest

Running with compatibility version `4`

 DEV  v1.6.0 /home/projects/github-gu1sj1-xq3xf8/app

 ❯ ../tests/e2e/basic.e2e.test.ts (1)
   ❯ basic (1)
     ⠹ [ beforeAll ]
     · contains Welcome to Nuxt! string

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  ../tests/e2e/basic.e2e.test.ts > basic
Error: Cannot find any nuxt version from ./app
 ❯ Module.loadNuxt ../node_modules/@nuxt/kit/dist/index.mjs:2729:11
 ❯ loadFixture ../node_modules/@nuxt/test-utils/dist/shared/test-utils.C7cWLW4C.mjs:102:14
    100|   });
    101|   const buildDir = ctx.nuxt.options.buildDir;
    102|   if (!existsSync(buildDir)) {
       |              ^
    103|     await promises.mkdir(buildDir, { recursive: true });
    104|     ctx.teardown = ctx.teardown || [];
 ❯ setup2 ../node_modules/@nuxt/test-utils/dist/shared/test-utils.C7cWLW4C.mjs:178:7

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests   (1)
   Start at  09:54:14
   Duration  4.84s (transform 445ms, setup 45ms, collect 2.14s, tests 5ms, environment 0ms, prepare 807ms)

2 replies

NNuxt

•Created by Zampa on 7/18/2024 in #❓・help

Correct setup config for Test Utils

Reproduction: https://stackblitz.com/edit/github-gu1sj1?file=tests%2Fbasic.e2e.test.ts Issue filed: https://github.com/nuxt/test-utils/issues/893 I can't seem to utilize the alternative nuxt.config location with @nuxt/test-utils. If I have my nuxt.config as ./.config/nuxt.ts, e2e tests will always fail with Error: Invalid nuxt app. (Please explicitly set 'options.rootDir' pointing to a valid nuxt app). This is my test:

// ./tests/basic.e2e.test.ts
import { $fetch, setup } from '@nuxt/test-utils/e2e';
import { describe, expect, it } from 'vitest';

describe('basic', async () => {
  await setup({
    rootDir: './app',
    configFile: '/.config/nuxt.ts',
  });

  it('contains Welcome to Nuxt! string', async () => {
    const html = await $fetch('/');
    expect(html).toContain('Welcome to Nuxt!');
  });
});

// ./tests/basic.e2e.test.ts
import { $fetch, setup } from '@nuxt/test-utils/e2e';
import { describe, expect, it } from 'vitest';

describe('basic', async () => {
  await setup({
    rootDir: './app',
    configFile: '/.config/nuxt.ts',
  });

  it('contains Welcome to Nuxt! string', async () => {
    const html = await $fetch('/');
    expect(html).toContain('Welcome to Nuxt!');
  });
});

and my nuxt.config:

// ./.config/nuxt.ts
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  future: {
    compatibilityVersion: 4,
  },
  modules: ['@nuxt/test-utils/module'],
});

// ./.config/nuxt.ts
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  future: {
    compatibilityVersion: 4,
  },
  modules: ['@nuxt/test-utils/module'],
});

If I move and rename nuxt.config back to the root, it works. I'm not sure if this is a limitation or expectation of test-utils, or the config file name/location that isn't being honored by the configFile setting, or what.

1 replies

NNuxt

•Created by Zampa on 6/17/2024 in #❓・help

Can't deploy to Cloudflare with 3.12.2

I am still seeing an "unknown internal error" when deploying to Cloudflare Pages using Nuxt 3.12.1 or 3.12.2. Nuxt 3.11.2 deploys fine. The end of my Cloudflare deployment log looks like this:

17:01:36.251    ✨ Compiled Worker successfully
17:01:37.042    Found _routes.json in output directory. Uploading.
17:01:37.060    Validating asset output directory
17:01:39.998    Deploying your site to Cloudflare's global network...
17:01:50.855    Parsed 15 valid header rules.
17:01:52.919    Uploading... (450/1087)
17:01:54.597    Uploading... (662/1087)
17:01:54.699    Uploading... (874/1087)
17:01:54.813    Uploading... (1087/1087)
17:01:54.814    ✨ Success! Uploaded 637 files (450 already uploaded) (2.82 sec)
17:01:54.814    
17:01:55.445    ✨ Upload complete!
17:01:56.800    Uploading to dependency cache
17:01:56.808    Uploading to build output cache
17:01:57.139    Success: Build output uploaded to build cache.
17:02:00.109    Success: Dependencies uploaded to build cache.
17:02:04.266    Success: Assets published!
17:02:06.940    Error: Failed to publish your Function. Got error: Unknown internal error occurred.
17:02:06.940    Note: Not all logs could be displayed, click "Download log" to view more

17:01:36.251    ✨ Compiled Worker successfully
17:01:37.042    Found _routes.json in output directory. Uploading.
17:01:37.060    Validating asset output directory
17:01:39.998    Deploying your site to Cloudflare's global network...
17:01:50.855    Parsed 15 valid header rules.
17:01:52.919    Uploading... (450/1087)
17:01:54.597    Uploading... (662/1087)
17:01:54.699    Uploading... (874/1087)
17:01:54.813    Uploading... (1087/1087)
17:01:54.814    ✨ Success! Uploaded 637 files (450 already uploaded) (2.82 sec)
17:01:54.814    
17:01:55.445    ✨ Upload complete!
17:01:56.800    Uploading to dependency cache
17:01:56.808    Uploading to build output cache
17:01:57.139    Success: Build output uploaded to build cache.
17:02:00.109    Success: Dependencies uploaded to build cache.
17:02:04.266    Success: Assets published!
17:02:06.940    Error: Failed to publish your Function. Got error: Unknown internal error occurred.
17:02:06.940    Note: Not all logs could be displayed, click "Download log" to view more

There's nothing in the full log that indicates what the internal error is. Nuxt client built successfully:

17:00:43.082    [info] ✓ built in 17.04s
17:00:43.082    [success] Client built in 17051ms

17:00:43.082    [info] ✓ built in 17.04s
17:00:43.082    [success] Client built in 17051ms

Nuxt server built successfully:

17:00:55.219    [info] ✓ built in 12.02s
17:00:55.220    [success] Server built in 12047ms
17:00:57.057    [success] [nitro] Generated public dist

17:00:55.219    [info] ✓ built in 12.02s
17:00:55.220    [success] Server built in 12047ms
17:00:57.057    [success] [nitro] Generated public dist

I'm not sure what changed in 3.12.x that is causing CF Pages to fail?

21 replies

NNuxt

•Created by Zampa on 6/12/2024 in #❓・help

With the new /app dir structure, where do we place:

/tests/ (all the .test.ts files) /types (all the TS interfaces) /stores (all the Pinia stores) ? Do they all go under /app?

3 replies

KPCKevin Powell - Community

•Created by Zampa on 5/28/2024 in #front-end

Modern version of stylelint-config-rational-order ?

I'd like to lean on stylelint to keep my properties in a rational order, but the existing stylelint-config-rational-order is outdated, and does not include any logical properties whatsoever (like margin-inline-start). Is there an up-to-date version of such a config for stylelint that includes all modern (as of 2024) CSS properties?

3 replies

NNuxt

•Created by Zampa on 5/2/2024 in #❓・help

Get dynamic array of page names in Nuxt application

I have a scenario where I'd like to add a middleware that references an array of all the page names that exist at the root of the application (i.e. /user, /faq, /about, etc.). Rather than hardcode an array of all those names ['user', 'faq', 'about'], is there some way via Nitro or Nuxt to parse/call to get all the page names that exist within the current Nuxt application?

11 replies

NNuxt

•Created by Zampa on 3/26/2024 in #❓・help

(Nuxt 3.11) Chunk naming for CSS?

With 3.11, I am seeing the new _nuxt/[hash].js filename pattern for .js files, but is there a way to configure Nuxt/Vite to do the same for .css files? I still see _nuxt/[name].[hash].css in production builds.

1 replies

KPCKevin Powell - Community

•Created by Zampa on 1/19/2024 in #front-end

How do you set proportional border-widths based on image size?

10 replies

KPCKevin Powell - Community

•Created by Zampa on 11/15/2023 in #front-end

Dynamic Font Size Based On Container & Text Length

7 replies

KPCKevin Powell - Community

•Created by Zampa on 11/7/2023 in #front-end

What are the best practices for the number of srcset items for a dynamically sized image?

2 replies

NNuxt

•Created by Zampa on 6/23/2023 in #❓・help

Nuxt 3.6 not moving font files (.woff2) to _nuxt on build

Previous to 3.6, Nuxt would copy the font files into the _nuxt directory, but now it does not, which causes broken font declarations in our CSS.

2 replies

NNuxt

•Created by Zampa on 1/28/2023 in #❓・help

Different URLs for client XHR request and SSR XHR requests?

Does anyone know if there is a way to use one URL for all SSR-initiated API XHR requests, and another URL for all browser (client-side) API XHR requests? I'm noticing that if I have API calls in a server route, it's adding 5x delay to the raw XHR request that happens in the browser. Example: Call the API endpoint in the browser: 20-30ms Nuxt SSR calls the API endpoint from a Nuxt server route: 150-200ms So presumably there is some way to do this using middleware? A custom wrapper for all API requests (/api/*) that would either : 1) use a fully qualified API endpoint URL (https://api.mysite.com/api/...) for all client-side API calls 2) use a relative API endpoint URL ('/api/...) that references the Nuxt server route /api/[...].ts for all server-initiated API calls (any time a page is server rendered, and that page requires data from an external API

1 replies

NNuxt

•Created by Zampa on 11/22/2022 in #❓・help

Nuxt 3 Custom Loading Component

Is there an equivalent to Nuxt 2's custom <Loading> component available in Nuxt 3, with start(). finish(), fail()? https://nuxtjs.org/docs/features/loading/#using-a-custom-loading-component I only see https://nuxt.com/docs/api/components/nuxt-loading-indicator in the Nuxt 3 docs, so I was curious if there was any internal initiative to replicate this in Nuxt 3? The note here leads me to believe it's planned but not implemented: https://nuxt.com/docs/migration/component-options#loading Perhaps now it would be a quick one to knock out since Nuxt 3.0.0 is out?

5 replies

NNuxt

•Created by Zampa on 11/18/2022 in #❓・help

Nuxt Image module can't be configured in Nuxt 3

13 replies

NNuxt

•Created by Zampa on 11/18/2022 in #❓・help

PostCSS.config is a path (string) or a boolean?

3 replies

NNuxt

•Created by Zampa on 11/18/2022 in #❓・help

What is the recommended way to explicitly import $fetch or useCookie into a Pinia store?

import { $fetch } from 'ofetch';
import { useCookie } from '#imports';

import { $fetch } from 'ofetch';
import { useCookie } from '#imports';

? I'm trying to ensure that whenever @nuxt/test-utils-edge pulls in the store for a test that it can find those normally auto-imported helpers/composables.

2 replies

Gaming

Programming