BinaryArtifex Posts - Answer Overflow

BinaryArtifex

Explore posts from servers

•Created by BinaryArtifex on 4/5/2025 in #❓・help

v-bind not resolving computed object?

i have the following composable, fieldArgs is not reactive, however each of each properties are computed values.

const fieldArgs = useFormField(props);

const fieldArgs = useFormField(props);

im trying to consume it in my template via

v-bind="fieldArgs.fieldProps"

v-bind="fieldArgs.fieldProps"

however the output injects the stringified, non resolved computed value with all its internals, meta properties, etc. I have to either wrap using unref or destructure useFormField and pass fieldProps that way. I don't understand, if the destructured property that is itself a composable works, why doesn't fieldArgs.fieldProps which is just the scenic route to the same property, not work?

5 replies

NNuxt

•Created by BinaryArtifex on 3/17/2025 in #❓・help

cannot resolve css path for local layer

im running nuxt with all v4 features enabled. i have a layers folder at the root of my project with a base layer. in here i wish to keep all my styles, assets, components, etc. in the nuxt config, im trying to reference the css file via

css: ["~/assets/css/styles.css"],

css: ["~/assets/css/styles.css"],

i think ive tried every combination of path alias and nothing works, i get the following

Pre-transform error: Failed to resolve import "app/assets/css/styles.css" from "virtual:nuxt:F%3A%2Fprojects%2Fcompany%2Fcompany-app%2F.nuxt%2Fcss.mjs".

Pre-transform error: Failed to resolve import "app/assets/css/styles.css" from "virtual:nuxt:F%3A%2Fprojects%2Fcompany%2Fcompany-app%2F.nuxt%2Fcss.mjs".

when dealing with local layers, how am i suppose to confidently reference file paths of that layer?

6 replies

NNuxt

•Created by BinaryArtifex on 3/10/2025 in #❓・help

useId() not passing value in function parameter

im trying to create an object list of toast configurations to render a list of toasts. when passing useId into any function exported by the composable it returns undefined

<script lang="ts" setup>
  const toaster = useToast();

  function handleInfoClick() {
    toaster.info({
      id: useId(), <<---- // passing in id here
      message: "Something interesting has happened",
      onClose: () => console.log("closing toast"),
    });
  }
</script>

<script lang="ts" setup>
  const toaster = useToast();

  function handleInfoClick() {
    toaster.info({
      id: useId(), <<---- // passing in id here
      message: "Something interesting has happened",
      onClose: () => console.log("closing toast"),
    });
  }
</script>

export function useToast() {
  const maxVisibleToasts = ref(3);
  const queue = ref<ToastConfig[]>([]);
  const hasToasts = computed(() => queue.value.length);

  function show(toast: ToastConfig) {
    queue.value.push({
      ...toast,
    });
  }

  function info(toast: Omit<ToastConfig, "variant">) {
    console.log(toast); // <<-----id is undefined
    return show({ ...toast, variant: "info" });
  }

  //...rest of composable

export function useToast() {
  const maxVisibleToasts = ref(3);
  const queue = ref<ToastConfig[]>([]);
  const hasToasts = computed(() => queue.value.length);

  function show(toast: ToastConfig) {
    queue.value.push({
      ...toast,
    });
  }

  function info(toast: Omit<ToastConfig, "variant">) {
    console.log(toast); // <<-----id is undefined
    return show({ ...toast, variant: "info" });
  }

  //...rest of composable

<template>
  <Teleport to="body">
    <ol
      v-if="store.hasToasts"
      class="fixed right-4 bottom-4 flex flex-col-reverse gap-y-2"
      role="region"
      tabindex="-1"
    >
      <li v-for="toast in store.queue.value" :key="toast.id">
        <VToast
          :id="toast.id" // <<------ no id is passed from the queue
          :icon="toast.icon"
          :message="toast.message"
          :title="toast.title"
          :variant="toast.variant"
        />
      </li>
    </ol>
  </Teleport>
</template>

<script lang="ts" setup>
  const store = useToast();
</script>

<template>
  <Teleport to="body">
    <ol
      v-if="store.hasToasts"
      class="fixed right-4 bottom-4 flex flex-col-reverse gap-y-2"
      role="region"
      tabindex="-1"
    >
      <li v-for="toast in store.queue.value" :key="toast.id">
        <VToast
          :id="toast.id" // <<------ no id is passed from the queue
          :icon="toast.icon"
          :message="toast.message"
          :title="toast.title"
          :variant="toast.variant"
        />
      </li>
    </ol>
  </Teleport>
</template>

<script lang="ts" setup>
  const store = useToast();
</script>

5 replies

NNuxt

•Created by BinaryArtifex on 11/17/2024 in #❓・help

v-bind not unwrapping reactive properties from composable

I have a helper composable here for orchestrating common aria attributes for form fields.

export function useFieldControl(args: UseFieldControlArgs): UseFieldControlReturn {
  const fieldId = args.id || useId();
  const labelId = `${fieldId}-label`;
  const descriptionId = computed(() => (args.description ? `${fieldId}-description` : undefined));
  const errorId = computed(() => (args.error ? `${fieldId}-error` : undefined));

  const labelProps = computed(() => ({ htmlFor: fieldId, id: labelId }));
  const descriptionProps = computed(() => ({ id: descriptionId.value }));
  const errorProps = computed(() => ({ id: errorId.value }));

  const fieldProps = computed(() => {
    const describedby = [descriptionId.value, errorId.value].filter(
      (id) => typeof id !== "undefined",
    );

    return {
      "aria-describedby": describedby.length ? describedby.join(" ") : undefined,
      "aria-invalid": Boolean(errorId.value) || undefined,
      "aria-labelledby": labelId,
      id: fieldId,
    };
  });

  return { labelProps, descriptionProps, errorProps, fieldProps };
}

export function useFieldControl(args: UseFieldControlArgs): UseFieldControlReturn {
  const fieldId = args.id || useId();
  const labelId = `${fieldId}-label`;
  const descriptionId = computed(() => (args.description ? `${fieldId}-description` : undefined));
  const errorId = computed(() => (args.error ? `${fieldId}-error` : undefined));

  const labelProps = computed(() => ({ htmlFor: fieldId, id: labelId }));
  const descriptionProps = computed(() => ({ id: descriptionId.value }));
  const errorProps = computed(() => ({ id: errorId.value }));

  const fieldProps = computed(() => {
    const describedby = [descriptionId.value, errorId.value].filter(
      (id) => typeof id !== "undefined",
    );

    return {
      "aria-describedby": describedby.length ? describedby.join(" ") : undefined,
      "aria-invalid": Boolean(errorId.value) || undefined,
      "aria-labelledby": labelId,
      id: fieldId,
    };
  });

  return { labelProps, descriptionProps, errorProps, fieldProps };
}

i try to use it in a consuming component without destructuring the returned object

// TextField.vue
const args = useFieldControl(props);

// TextField.vue
const args = useFieldControl(props);

and 'spreading' the props for each respective component via v-bind

<template>
  <div class="text-field">
    <VFieldLabel v-bind="args.labelProps">{{ label }}</VFieldLabel>
    ...rest of component
  </div>
</template>

<template>
  <div class="text-field">
    <VFieldLabel v-bind="args.labelProps">{{ label }}</VFieldLabel>
    ...rest of component
  </div>
</template>

however the v-bind only works if i either add the .value to the end of each object or if i destructure the values in the script and reference them that way. am i doing something wrong? i was under the impression v-bind unwraps computed values automagically....

5 replies

NNuxt

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

nuxt cannot infer nested component naming convention

If i have a component at components/app/app-button/app-button.vue, the auto import expects a component called AppAppButton, but if i remove the app-button folder and just have the component at components/app/app-button.vue then nuxt is smart enough to accept an AppButton import. I feel like this is a bug. I much prefer colocating styles, stories, tests, etc. with each of my components, hence the folder for each component. surely theres a way to tell nuxt not to append the root name of the path if it already exists on the component name or something or at least protections against arbitrarily removing identical prefixes on the next part of a prefix if it already exists?

5 replies

NNuxt

•Created by BinaryArtifex on 10/1/2024 in #❓・help

loose css intellisense when using tailwind directive in style block

ive installed everything according to docs, however when i try to include tailwind directives with my style block, i immediately loose css intellisense

<style lang="css">
  .btn {
    display: flex;
    font-size: theme(fontSize.sm);
    pad....<--- no more intellisense, just a list of gibberish
  }
</style>

<style lang="css">
  .btn {
    display: flex;
    font-size: theme(fontSize.sm);
    pad....<--- no more intellisense, just a list of gibberish
  }
</style>

<style lang="css">
  .btn {
    display: flex;
    pad....<--- get my list of css properties back
  }
</style>

<style lang="css">
  .btn {
    display: flex;
    pad....<--- get my list of css properties back
  }
</style>

ive tried everything, css assocation to tailwind, ignore css validation, string suggestions...etc.

2 replies

NNuxt

•Created by BinaryArtifex on 9/18/2024 in #❓・help

how does nuxt prevent parallel session refresh attempts on a nested route?

one infuriating pain-point i have with Remix is that there is no sufficient way to refresh your session without each of your nested routes making the same request to refresh the session, resulting in 'n-1' wasted requests and no idempotent way of determining which one will win. ive been trying to look into how nuxt handles this, particularly for nested routes but can't seem to find a definitive answer to this issue....

3 replies

DTDrizzle Team

•Created by BinaryArtifex on 1/6/2024 in #help

how to add ulid compatibility to postgres?

Is there a way to create a custom ulid type with postgres to use as a primary key? it could either be automatically generated from the database side or passed in from the client. it was easy enough to create a custom type using mysql that was essentially just a char(26), however im trying to implement something a little closer to this article - https://blog.daveallie.com/ulid-primary-keys. any advice would be greatly appreciated. This is also in the context of having a supabase postgres instance.

2 replies

DTDrizzle Team

•Created by BinaryArtifex on 8/31/2023 in #help

help with a generic mysql2 connection

gday folks, im trying to create what is essentially a generic mysql2 connection that is compatible with planetscale but also compatible with a local msyql2 server running in docker, for instance...my production database is planetscale hosted and any sort of dev or testing i want to do locally. My connection at the moment is literally just drizzle(connection, { mode: DB_MODE, schema }) however due to the sheer amount of options within the configuration im concerned im missing something crucial for the continued integration with planetscale with such a minimal config. granted the port, user, password, schema, etc are all in the uri, but is there anything else i should be considering?

2 replies

DTDrizzle Team

•Created by BinaryArtifex on 7/31/2023 in #help

onDuplicateKeyUpdate ???

i don't suppose anyone knows how to actually use this method? zero documentation on it and the planetscale dbClient only recognises this method after the values function. There is no "onConflictDoUpdate" or "onConflictDoNothing"....i just want it so if there is an item with the same slug, ignore the query...

export async function seed(client: DbClient) {
  await client
    .insert(customerMedicalCategory)
    .values(
      data.map((item) => ({
        id: ulid(),
        name: item.name,
        slug: paramCase(item.name),
        description: item.description
      })),
    ).onDuplicateKeyUpdate(???)
}

export async function seed(client: DbClient) {
  await client
    .insert(customerMedicalCategory)
    .values(
      data.map((item) => ({
        id: ulid(),
        name: item.name,
        slug: paramCase(item.name),
        description: item.description
      })),
    ).onDuplicateKeyUpdate(???)
}

2 replies

DTDrizzle Team

•Created by BinaryArtifex on 7/29/2023 in #help

onConflictDoNothing does not exist on planetscale client

i am getting an "Property onConflictDoNothing does not exist on type" on the following script....

export async function lookupNationalitySeed(client: DbClient) {
  await client.insert(lookupNationality).values(
    data.map((nationality) => ({
      id: ulid(),
      name: nationality,
      slug: paramCase(nationality),
    })),
  ).onConflictDoNothing()
}

export async function lookupNationalitySeed(client: DbClient) {
  await client.insert(lookupNationality).values(
    data.map((nationality) => ({
      id: ulid(),
      name: nationality,
      slug: paramCase(nationality),
    })),
  ).onConflictDoNothing()
}

the client is a type of PlanetScaleDatabase<typeof schema> the only typesafe method i get is onDuplicateKeyUpdate

6 replies

DTDrizzle Team

•Created by BinaryArtifex on 7/29/2023 in #help

cannot set alias for composite primary key, getting (errno 1059) (sqlstate 42000) errors

My table has the following schema ->

export const emergencyContactPhoneNumber = mysqlTable(
  "emergency_contact_phone_number",
  {
    emergencyContactId: ulid("emergency_contact_id").notNull(),
    phoneNumberId: ulid("phone_number_id").notNull(),
    description: varchar("description", { length: 10 }).notNull(),
    createdAt: timestamp("created_at").notNull().defaultNow(),
  },
  (table) => ({
    primaryKey: primaryKey(table.emergencyContactId, table.phoneNumberId),
  }),
);

export const emergencyContactPhoneNumber = mysqlTable(
  "emergency_contact_phone_number",
  {
    emergencyContactId: ulid("emergency_contact_id").notNull(),
    phoneNumberId: ulid("phone_number_id").notNull(),
    description: varchar("description", { length: 10 }).notNull(),
    createdAt: timestamp("created_at").notNull().defaultNow(),
  },
  (table) => ({
    primaryKey: primaryKey(table.emergencyContactId, table.phoneNumberId),
  }),
);

when migrating to planetscale i get the following error ->

DatabaseError: target: mycompany.-.primary: vttablet: rpc error: code = InvalidArgument desc = Identifier name 'emergency_contact_phone_number_emergency_contact_id_phone_number_id' is too long

DatabaseError: target: mycompany.-.primary: vttablet: rpc error: code = InvalidArgument desc = Identifier name 'emergency_contact_phone_number_emergency_contact_id_phone_number_id' is too long

the generated sql produces this monster index for the composite primary key

CREATE TABLE `emergency_contact_phone_number` (
    `emergency_contact_id` char(26) NOT NULL,
    `phone_number_id` char(26) NOT NULL,
    `description` varchar(10) NOT NULL,
    `created_at` timestamp NOT NULL DEFAULT (now()),
    CONSTRAINT `emergency_contact_phone_number_emergency_contact_id_phone_number_id` PRIMARY KEY(`emergency_contact_id`,`phone_number_id`)
);

CREATE TABLE `emergency_contact_phone_number` (
    `emergency_contact_id` char(26) NOT NULL,
    `phone_number_id` char(26) NOT NULL,
    `description` varchar(10) NOT NULL,
    `created_at` timestamp NOT NULL DEFAULT (now()),
    CONSTRAINT `emergency_contact_phone_number_emergency_contact_id_phone_number_id` PRIMARY KEY(`emergency_contact_id`,`phone_number_id`)
);

how the heck can i set an alias for a composite primary key?

13 replies

Gaming

Programming