Titan Posts - Answer Overflow

Titan

Explore posts from servers

NNuxt CDCloudflare Developers DTDrizzle Team

•Created by Titan on 10/29/2024 in #❓・help

[solved] Vue app aliases are not allowed in server runtime

[nitro 09:24:56]  ERROR  RollupError: [plugin impound] Vue app aliases are not allowed in server runtime. [importing #build/nuxt.config.mjs from node_modules/nuxt/dist/app/nuxt.js]

[nitro 09:24:56]  ERROR  RollupError: [plugin impound] Vue app aliases are not allowed in server runtime. [importing #build/nuxt.config.mjs from node_modules/nuxt/dist/app/nuxt.js]

How do I go about debugging this error? I've been through all my server/ files and checked I'm not importing anything from the client or Vue based and the error doesn't give any more hints about where the problem is.

9 replies

NNuxt

•Created by Titan on 10/29/2024 in #❓・help

[solved] Add excludes to server tsconfig

5 replies

NNuxt

•Created by Titan on 7/30/2024 in #❓・help

How to "mock" an H3 request with query string

I'm writing some unit tests for my "useValidatedQuery/useValidatedBody" functions that take a yup schema and validate the request. I've got this working fine for the body with: ✅ this works

it('returns the body if it is valid', async () => {
    const testSchema = object({
      email: string().email().required()
    })

    const h3BodyEvent = {
      method: 'POST',
      node: { req: { headers: [], body: { email: '[email protected]', foo: 'bar' } } }
    }

    const result = await useValidatedBody(testSchema, h3Event)

    expect(result).toEqual({ email: '[email protected]', foo: 'bar' })
  })

it('returns the body if it is valid', async () => {
    const testSchema = object({
      email: string().email().required()
    })

    const h3BodyEvent = {
      method: 'POST',
      node: { req: { headers: [], body: { email: '[email protected]', foo: 'bar' } } }
    }

    const result = await useValidatedBody(testSchema, h3Event)

    expect(result).toEqual({ email: '[email protected]', foo: 'bar' })
  })

However I cannot get it work with the query string, I just can't work out the shape of the event, I've tried it in all the below places and none of them seem to work: ❌ none of these work

const h3QueryEvent = {
      method: 'GET',
      queryString: 'email=bar', <-- doesn't work here
      url: 'https://test.com/?email=bar',  <-- doesn't work here
      node: { req: { headers: [], queryString: 'email=bar', search: 'email=bar', url: { search: 'email=bar' } } },  <-- doesn't work here
      web: { request: { url: 'https://test.com/?email=bar' }, url: 'https://test.com/?email=bar' }  <-- doesn't work here
    }

const h3QueryEvent = {
      method: 'GET',
      queryString: 'email=bar', <-- doesn't work here
      url: 'https://test.com/?email=bar',  <-- doesn't work here
      node: { req: { headers: [], queryString: 'email=bar', search: 'email=bar', url: { search: 'email=bar' } } },  <-- doesn't work here
      web: { request: { url: 'https://test.com/?email=bar' }, url: 'https://test.com/?email=bar' }  <-- doesn't work here
    }

The function it gets passed into is the H3 getQuery function: const query = getQuery(event) currently returning empty object

2 replies

NNuxt

•Created by Titan on 5/24/2024 in #❓・help

Dynamic/computed layout without causing content shift or re-render after route change

In my app.vue I'm using dynamic layouts to avoid having to specify the layout in every page:

const route = useRoute()

const layout = computed(() => {
  if (route.path.startsWith('/platform')) {
    return 'platform'
  }

  if (route.path.startsWith('/staff')) {
    return 'staff'
  }

  if (route.path.startsWith('/admin')) {
    return 'tenant-admin'
  }

  if (route.path.startsWith('/auth')) {
    return 'auth'
  }

  return 'brochureware'
})

<template>
  <NuxtLayout :name="layout">

const route = useRoute()

const layout = computed(() => {
  if (route.path.startsWith('/platform')) {
    return 'platform'
  }

  if (route.path.startsWith('/staff')) {
    return 'staff'
  }

  if (route.path.startsWith('/admin')) {
    return 'tenant-admin'
  }

  if (route.path.startsWith('/auth')) {
    return 'auth'
  }

  return 'brochureware'
})

<template>
  <NuxtLayout :name="layout">

However when switching from /auth to /platform you see a noticable shift in the content as the layout switches after the page has rendered. This re-rendering also breaks automated e2e tests as it attempts to fill in forms while the shift is happening. Is there anyway to make the layout change blocking or apply before the next <NuxtPage /> renders I assume it's because the computed watcher on useRoute is just updating too slow. Can it be set in the middleware maybe?

2 replies

NNuxt

•Created by Titan on 4/11/2024 in #❓・help

nuxt-ui with input masking recommendations

Does anyone have any recommendations for input masking with nuxt-ui UInput? I've previously used imaskjs but it requires binding to the native input element which won't work with <UInput />. Thanks!

1 replies

NNuxt

•Created by Titan on 4/7/2024 in #❓・help

Supress <Suspense> warning, adds lots of console logs in tests

How do I hide the <Suspense> is an experimental feature and its API will likely change. message in Nuxt 3? When unit testing it appears many times for each test which is pretty frustrating

7 replies

NNuxt

•Created by Titan on 4/5/2024 in #❓・help

Can Nuxt Hub features be used outside of the base template?

Reading CF's announcement today: https://blog.cloudflare.com/blazing-fast-development-with-full-stack-frameworks-and-cloudflare And realising this sounds a lot like what you guys are doing in Nuxt Hub, is there a way to utilise parts of it, say the D1 or R2 functions, without opting into all the core when I already have my own base application? E.g it wouldn't also be importing a bunch of irrelevant code from core that my app wouldn't utilise? Thanks, it's not quite clear how standalone some of the Nuxt Hub features are.

1 replies

NNuxt

•Created by Titan on 4/5/2024 in #❓・help

SOLVED: How to create server middleware just for API routes?

I'm trying to create middleware for my server API routes, but I've found they also run on SSR mode when trying to render the client, which has nothing to do with my API. How do I target just API H3 routes with middleware?

3 replies

NNuxt

•Created by Titan on 2/29/2024 in #❓・help

Nuxt server API on subdomain

For native app reasons I need my Nuxt API routes to be on a subdomain of the Nuxt FE root domain. Has anyone done this before? In my head I feel like the solution is to just deploy the entire thing twice to both the root domain and subdomain and change the base URL for the API to point to the subdomain

9 replies

Gaming

Programming