JavascriptMick Posts - Answer Overflow

JavascriptMick

Explore posts from servers

•Created by JavascriptMick on 8/29/2024 in #❓・help

Real cost of scaling Nuxt on netlify

I have a web app in Nuxt3 hosted on netlify. Trying to figure out how the cost will scale as I go live. The website will get some traffic but is largely brochure but it also serves a rest API that will be accessed via a mobile app. This will get smashed as I scale. Netlify Pro gives me only 125k serverless function invitations per month. If I have 1000 users (I'm b2c) that's only 4 API calls per user per day... That's not going to work. Same plan gives me 2 million edge function invocations gives me 600 API calls per user per day .. should be ok. Do I need to use the edge preset for this? SERVER_PRESET=netlify_edge I guess I'm just looking for some advice from anyone who has actually scaled out a Nuxt backend. Did you use netlify or similar or go to VPS? Did costs blow out? Did you need to refactor? Any help or refs appreciated

6 replies

NNuxt

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

Can I put multiple Favicon assets in public?

2 replies

NNuxt

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

What are people using for Toasts?

10 replies

NNuxt

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

Best Design system for SAAS app?

I'm shite at CSS but need to make my SAAS site look pretty. In the past I have used Bootstrap for everything but am open to new approaches. I guess important features are:- - works good with Nuxt 3 - lots of example snippets - possibility of theming

10 replies

NNuxt

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

Global onMounted for Pinia initialisation?

I have an initialisation method on my Pinia store that I want to invoke before any other store stuff is invoked. I am currently using onMounted on a header component but it feels like a hack and doesn't always fire. AppHeader.vue script setup...

  onMounted(async () => {
    await authStore.initUser();
  });

  onMounted(async () => {
    await authStore.initUser();
  });

Is there a better approach for global store initialisation? maybe onMounted for the app.vue? or in defineNuxtConfig 'ready' hook?

8 replies

NNuxt

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

useState + watch + async fetch... should I just use Pinia at this point?

Hi All, New to Nuxt 3. I am using useState to hold my application state. I want to respond to a change in a state property (activeMembership) by doing a fetch (trpc/Prisma) and then using the fetch to update another bit of the state (notes). The following works ok but feels pretty clumsy.

  // composables/states.ts
  import { Membership, Note } from ".prisma/client"

  export type AppState = {
    activeMembership?: Membership
    notes: Note[]
  }

  export const appState = () => useState<AppState>('appState', () => ({
    notes: []
  }));

  // pages/dashboard.vue
  const theAppState = appState();
  watch(theAppState.value, (newAppState) => {
    if(newAppState.activeMembership){
      const { data: foundNotes } = $client.notes.getForCurrentUser.useQuery({account_id: newAppState.activeMembership.account_id});
      if(foundNotes.value?.notes){
        theAppState.value.notes = foundNotes.value.notes;
      }
    }
  });

  // composables/states.ts
  import { Membership, Note } from ".prisma/client"

  export type AppState = {
    activeMembership?: Membership
    notes: Note[]
  }

  export const appState = () => useState<AppState>('appState', () => ({
    notes: []
  }));

  // pages/dashboard.vue
  const theAppState = appState();
  watch(theAppState.value, (newAppState) => {
    if(newAppState.activeMembership){
      const { data: foundNotes } = $client.notes.getForCurrentUser.useQuery({account_id: newAppState.activeMembership.account_id});
      if(foundNotes.value?.notes){
        theAppState.value.notes = foundNotes.value.notes;
      }
    }
  });

Specifically, it feels strange to use a watch, it feels even stranger to put the watch + fetch in the setup script for the dashboard. I'm more familiar with Vuex where this would be an Action inside which I would dispatch a mutation to change the property (activeMembership) , then do the fetch, then dispatch another mutation to update the notes. No watches, central store, neat and tidy. Is there a neater way to utilise useState or do I just quit and move to Vuex/Pinia at this point?

3 replies

Gaming

Programming