JavascriptMick Comments - Answer Overflow

Topics

JavascriptMick

Explore posts from servers

NNuxt TtRPC PPrisma

•Created by JavascriptMick on 2/17/2024 in #❓・help

Can I put multiple Favicon assets in public?

for now, I have dumped them all in and done this in my nuxt.config.ts...

  app: {
    head: {
      htmlAttrs: {
        lang: 'en'
      },
      title: 'Blah',
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        {
          rel: 'icon',
          type: 'image/png',
          sizes: '32x32',
          href: '/favicon-32x32.png'
        },
        {
          rel: 'icon',
          type: 'image/png',
          sizes: '16x16',
          href: '/favicon-16x16.png'
        },
        {
          rel: 'apple-touch-icon',
          sizes: '180x180',
          href: '/apple-touch-icon.png'
        },
        { rel: 'manifest', href: '/site.webmanifest' }
      ]
    }
  },

  app: {
    head: {
      htmlAttrs: {
        lang: 'en'
      },
      title: 'Blah',
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        {
          rel: 'icon',
          type: 'image/png',
          sizes: '32x32',
          href: '/favicon-32x32.png'
        },
        {
          rel: 'icon',
          type: 'image/png',
          sizes: '16x16',
          href: '/favicon-16x16.png'
        },
        {
          rel: 'apple-touch-icon',
          sizes: '180x180',
          href: '/apple-touch-icon.png'
        },
        { rel: 'manifest', href: '/site.webmanifest' }
      ]
    }
  },

I guess I'll see how it goes

2 replies

•Created by JavascriptMick on 6/2/2023 in #❓-help

Use onError to change an application error into a TRPCError?

See example in my boilerplate repo here https://github.com/JavascriptMick/nuxt3-boilerplate/blob/master/server/trpc/trpc.ts

8 replies

•Created by JavascriptMick on 6/2/2023 in #❓-help

Use onError to change an application error into a TRPCError?

ah nice, thanks guys, yep this works.....

const t = initTRPC.context<Context>().create({
  errorFormatter: (opts)=> {
    const { shape, error } = opts;
    if (!(error.cause instanceof AccountLimitError)) {
      return shape;
    }
    return {
      ...shape,
      data: {
        ...shape.data,
        httpStatus: 401,
        code: 'UNAUTHORIZED'
      },
    };
  }
})

const t = initTRPC.context<Context>().create({
  errorFormatter: (opts)=> {
    const { shape, error } = opts;
    if (!(error.cause instanceof AccountLimitError)) {
      return shape;
    }
    return {
      ...shape,
      data: {
        ...shape.data,
        httpStatus: 401,
        code: 'UNAUTHORIZED'
      },
    };
  }
})

8 replies

•Created by JavascriptMick on 5/7/2023 in #❓・help

What are people using for Toasts?

I also wrote a simple wrapper for the DaisyUI Modal that makes it nicer to use https://gist.github.com/JavascriptMick/77838a21d4ec1b5606dd5ae09ad21a67

10 replies

•Created by JavascriptMick on 5/7/2023 in #❓・help

What are people using for Toasts?

oh, also, the creator of DaisyUI has indicated that the suboptimal behaviour of modal will be fixed in version 3 by using the html dialog element https://github.com/saadeghi/daisyui/issues/1341#issuecomment-1504395570

10 replies

•Created by JavascriptMick on 5/7/2023 in #❓・help

What are people using for Toasts?

Got it working, it's not too ugly.. no additional libraries, just Pinia and DaisyUI https://gist.github.com/JavascriptMick/d2830e8703e706fe0a0f6703b0877f3f

10 replies

•Created by JavascriptMick on 5/7/2023 in #❓・help

What are people using for Toasts?

thanks @ven yep I saw this.... and I am concerned about the accessibility aspects that were mentioned e.g. modals not really being modal etc. The consensus though in the comments for that video seemed to be that Daisy didn't have behaviour (js) so it was unreasonable to expect it to do stuff like limiting the tab context. Again, I feel like headless ui has the right approach in that it only does the behaviour and lets you style as you wish.. but headless.ui doesn't have toasts and they apparently don't intend to support them either.

10 replies

•Created by JavascriptMick on 5/7/2023 in #❓・help

What are people using for Toasts?

I think I'm just going to integrate notifications into my Pinia state and use DaisyUI to style them. I looked at all the component libraries and they all feel a bit heavy and when it comes to actually doing the toast behaviours, they don't actually have them (e.g. headless UI and FlowbiteI usually like to get a bit funky with notification state anyway e.g. keeping around a list of notifications that have already 'closed' in case you want to go back to them. If I get this working, will post a link to the source here.

10 replies

•Created by JavascriptMick on 4/13/2023 in #❓・help

Best Design system for SAAS app?

ok ok, looks like tailwind has won the mindshare war and is friking everywhere 🙂 why would I buck the trend

10 replies

•Created by roga on 3/23/2023 in #❓・help

Nuxt & Supabase Auth

I don't have your exact problem but I have my supabase auth and guards working pretty good here https://github.com/JavascriptMick/nuxt3-boilerplate hth

7 replies

•Created by JavascriptMick on 4/7/2023 in #❓・help

Global onMounted for Pinia initialisation?

for now I have resolved this by specifying onMounted for every page where the user needs to be initialised. The store function is idempotent and does no work if it is not required. This seems to work. Thanks for your help @chakraecho

8 replies

•Created by JavascriptMick on 4/7/2023 in #❓・help

Global onMounted for Pinia initialisation?

ok so I did the plugin and it does invoke my store function but now inside the store function, the trpc client supplied by trpc-nuxt is not available via useNuxtApp

const { $client } = useNuxtApp();
const { dbUser } = await $client.auth.getDBUser.query();

const { $client } = useNuxtApp();
const { dbUser } = await $client.auth.getDBUser.query();

[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'auth')

8 replies

•Created by JavascriptMick on 4/7/2023 in #❓・help

Global onMounted for Pinia initialisation?

I tried this...

  hooks: {
    'ready': async () => {
      const authStore = useAuthStore();
      await authStore.initUser(); 
    }
  },

  hooks: {
    'ready': async () => {
      const authStore = useAuthStore();
      await authStore.initUser(); 
    }
  },

but useAuthStore is not defined 😦

8 replies

•Created by JavascriptMick on 4/7/2023 in #❓・help

Global onMounted for Pinia initialisation?

I'm using Nuxt 3, defineNuxtPlugin doesn't work right?

8 replies

•Created by JavascriptMick on 2/25/2023 in #❓-help

is context cached?

aha, thanks @msalsbery you are right, I accidentally introduced 'caching' because I am defining the variable for dbUser outside the createContext function.....

let dbUser: FullDBUser | null

export async function createContext(event: H3Event){
  if (!dbUser) {....etc

let dbUser: FullDBUser | null

export async function createContext(event: H3Event){
  if (!dbUser) {....etc

..... which in hindsight is REALLY STOOPID, the example I followed treated the db connection (i.e.. prisma) in this way but then loaded the user fresh on each call to context... this is the way.

7 replies

•Created by JavascriptMick on 2/25/2023 in #❓-help

is context cached?

seems like createContext is indeed called for every request but the values on the context are already present on subsequent requests

7 replies