Garzec Posts - Answer Overflow

Garzec

Explore posts from servers

CC#NNuxt JCHJava Community | Help. Code. Learn.SSolidJS

•Created by Garzec on 4/28/2025 in #support

How do Layouts work with SolidStart?

I wasn't able to find a layout chapter in the docs for this :S I found this https://docs.solidjs.com/solid-router/concepts/layouts and this https://github.com/solidjs/solid-start/discussions/846 So I created a file /src/routes/(layout).tsx ( besides the index file ) with the following content

export default function Layout(props) {
    return (
        <>
            <div>Header goes here</div>
            {props.children}
        </>
    );
};

export default function Layout(props) {
    return (
        <>
            <div>Header goes here</div>
            {props.children}
        </>
    );
};

but unfortunately this file was ignored. - How do I have to name this file? - TS doesn't know the type for props, what to import here? Wasn't able to find something like LayoutProps Thanks in advance! 🙂

9 replies

NNuxt

•Created by Garzec on 4/25/2025 in #❓・help

Does Nuxt UI ship its own form library?

I'm coming from React and always needed a UI library + form library ( e.g. React Hook Form ) + a custom schema parser ( e.g. Zod ) I thought Vue people would be using https://vee-validate.logaretm.com/v4/ as their form library but it seems with Nuxt UI you only need a custom schema parser. Is this correct? 🙂 Maybe Nuxt UI is using vee validate under the hood? Is Nuxt UI capable of handling complex forms, e.g. field arrays with indices?

9 replies

SSolidJS

•Created by Garzec on 4/15/2025 in #support

Need help understanding preload and file conventions

Hello guys, I started with SolidStart and want to fetch data before rendering the page, So I found preload here https://docs.solidjs.com/solid-start/building-your-application/routing#additional-route-config and started with

import { RouteDefinition } from "@solidjs/router";

export const routeDefinition: RouteDefinition = {
  async preload({ params }) {
    await new Promise((resolve, reject) => setTimeout(resolve, 3000)) // show pending component page
    throw new Error("ERR"); // show error component page
  }
}

export default function Page() {
    return <div>Page</div>;
}

import { RouteDefinition } from "@solidjs/router";

export const routeDefinition: RouteDefinition = {
  async preload({ params }) {
    await new Promise((resolve, reject) => setTimeout(resolve, 3000)) // show pending component page
    throw new Error("ERR"); // show error component page
  }
}

export default function Page() {
    return <div>Page</div>;
}

It "somehow" works, the preload function was called. I also created 3 other components in the same directory => notFound.tsx, pending.tsx, error.tsx. All of those 3 files might need different names, I don't know. My questions are: - How do I render a 404 page? - Is it possible to render a pending page while preloading the data? How? - How do I render an error page if the preload function throws? - How do I access the fetched data inside my "success" page? I wasn't able to find it in the docs and maybe I completely misunderstood the concepts here 🙂 But I know that https://tanstack.com/router handles things this way

4 replies

SSolidJS

•Created by Garzec on 4/11/2025 in #support

Is it recommended to use Start even if you don't need it?

Hello guys, I don't need any serverside stuff and would like to know if I should stick to Solid + Router instead? 🙂 Do I get any benefits from Start ( AFAIK it's not batteries included, I still have to install the router package )

9 replies

SSolidJS

•Created by Garzec on 4/10/2025 in #support

Which form validation library are you using?

Coming from React I really love https://react-hook-form.com/ Are you guys using Tanstack Form for Solid or what is the "most popular" one? 🙂

6 replies

JCHJava Community | Help. Code. Learn.

•Created by Garzec on 1/12/2025 in #java-help

How to apply request body validation with error details?

Hello there, I want to apply request body validation to my Spring project

import jakarta.validation.constraints.*;

data class RequestBodyDTO(
    @NotBlank(message = "ID is required.")
    val iD: String
)

import jakarta.validation.constraints.*;

data class RequestBodyDTO(
    @NotBlank(message = "ID is required.")
    val iD: String
)

and this endpoint

import jakarta.validation.Valid
import org.springframework.http.ResponseEntity
import org.springframework.web.bind.annotation.*

@RestController()
@RequestMapping("/foo")
class Handler {
    @PostMapping
    fun handle(@Valid @RequestBody requestBody: RequestBodyDTO): ResponseEntity<Unit> {
        return ResponseEntity.ok().build()
    }
}

import jakarta.validation.Valid
import org.springframework.http.ResponseEntity
import org.springframework.web.bind.annotation.*

@RestController()
@RequestMapping("/foo")
class Handler {
    @PostMapping
    fun handle(@Valid @RequestBody requestBody: RequestBodyDTO): ResponseEntity<Unit> {
        return ResponseEntity.ok().build()
    }
}

I thought @Valid would handle it for me but actually the API consumer still gets a 400 without any error details. So the consumer doesn't know what's wrong. After googling around I think Spring doesn't do that for me out of the box. So I created an additional class

import org.springframework.http.HttpStatus
import org.springframework.validation.FieldError
import org.springframework.web.bind.MethodArgumentNotValidException
import org.springframework.web.bind.annotation.*

@ControllerAdvice
class ValidationExceptionHandler {
    @ResponseStatus(HttpStatus.BAD_REQUEST)
    @ExceptionHandler(MethodArgumentNotValidException::class)
    fun handleValidationException(
        exception: MethodArgumentNotValidException
    ): Map<String, String?> {
        return exception.bindingResult.allErrors.associate { error ->
            val fieldName = (error as FieldError).field
            val errorMessage = error.defaultMessage

            fieldName to errorMessage
        }
    }
}

import org.springframework.http.HttpStatus
import org.springframework.validation.FieldError
import org.springframework.web.bind.MethodArgumentNotValidException
import org.springframework.web.bind.annotation.*

@ControllerAdvice
class ValidationExceptionHandler {
    @ResponseStatus(HttpStatus.BAD_REQUEST)
    @ExceptionHandler(MethodArgumentNotValidException::class)
    fun handleValidationException(
        exception: MethodArgumentNotValidException
    ): Map<String, String?> {
        return exception.bindingResult.allErrors.associate { error ->
            val fieldName = (error as FieldError).field
            val errorMessage = error.defaultMessage

            fieldName to errorMessage
        }
    }
}

Unfortunately the result is the same, the API consumer won't get any error details. Is something missing? Do I even need the ValidationExceptionHandler ? How do I achieve this? Thanks! 🙂

56 replies

NNuxt

•Created by Garzec on 4/24/2023 in #❓・help

How to install Vuetify?

2 replies

NNuxt

•Created by Garzec on 4/20/2023 in #❓・help

How to setup tests?

I created a new Nuxt3 app via npx nuxi init <project-name> and want to add unit tests. Based on https://nuxt.com/docs/getting-started/testing I called npm install -D @nuxt/test-utils vitest and started with ./pages/foo.spec.ts

    import { describe, it, expect } from "vitest";
    import { setup } from "@nuxt/test-utils";
    
    describe("Suite", async () => {
      await setup();
    
      it("passes", () => {
        expect(true).toBeTruthy();
      });
    });

    import { describe, it, expect } from "vitest";
    import { setup } from "@nuxt/test-utils";
    
    describe("Suite", async () => {
      await setup();
    
      it("passes", () => {
        expect(true).toBeTruthy();
      });
    });

When calling vitest --run as a npm script I get the following error

    TypeError: Cannot read properties of undefined (reading 'on')
     ❯ setupVitest ../../node_modules/@nuxt/test-utils/dist/index.mjs:138:10
        137|     setTestContext(void 0);
        138|   };
        139|   const afterAll = async () => {
           |     ^
        140|     if (ctx.serverProcess) {
        141|       setTestContext(ctx);
     ❯ Module.setup ../../node_modules/@nuxt/test-utils/dist/index.mjs:197:3
     ❯ pages/foo.spec.ts:5:3

    TypeError: Cannot read properties of undefined (reading 'on')
     ❯ setupVitest ../../node_modules/@nuxt/test-utils/dist/index.mjs:138:10
        137|     setTestContext(void 0);
        138|   };
        139|   const afterAll = async () => {
           |     ^
        140|     if (ctx.serverProcess) {
        141|       setTestContext(ctx);
     ❯ Module.setup ../../node_modules/@nuxt/test-utils/dist/index.mjs:197:3
     ❯ pages/foo.spec.ts:5:3

Maybe my setup is wrong. I wasn't able to find information about - Where to put the tests? - How to call the tests via npm scripts?

2 replies

Gaming

Programming