Dovendyret
Dovendyret
PostsComments
NNuxt
Created by Dovendyret on 10/18/2024 in #❓・help
Generating dynamic composables from a module
Hello, I'm trying to create a module for internal company use that will automatically generate server/api routes and corresponding custom useFetch composables to integrate with our internal API's. This is a rough sketch of what I want to accomplish but I'm kinda stuck on how to dynamically generate my composables. The module creation documentation is very sparse and without much experience in building modules I'm at a roadblock right now. Anyone who has done something similar before and can provide some guidance? 
import { defineNuxtModule, createResolver, addServerHandler, addTemplate } from '@nuxt/kit'
import { pascalCase } from 'scule'

export interface ApiEndpoint {
  url: string
  headers?: Record<string, string>
}

export interface ModuleOptions {
  endpoints: Record<string, ApiEndpoint>
}

export default defineNuxtModule<ModuleOptions>({
  meta: {},
  setup(_options, _nuxt) {
    const { resolve } = createResolver(import.meta.url)

    const getDataComposableName = (endpoint: string) => `use${pascalCase(endpoint)}Fetch`

    const endpointKeys = Object.keys(_options.endpoints)

    endpointKeys.forEach((key) => {
      addServerHandler({
        route: `/api/${key}/**`,
        handler: resolve('runtime/server/handler'),
      })

      // Rough idea of what I want to accomplish
      addTemplate({
        filename: `${getDataComposableName(key)}.ts`,
        getContents: () => {
          return `
            import { useFetch, type UseFetchOptions } from '#app'

            export const ${getDataComposableName(key)} = <T>(
              url: string | (() => string),
              options?: UseFetchOptions<T>,
            ) => {
              const baseURL = '/api/${key}'
              return useFetch(url, {
                baseURL,
                ...options,
              })
            }
          `
        },
      })
    })
  },
})
import { defineNuxtModule, createResolver, addServerHandler, addTemplate } from '@nuxt/kit'
import { pascalCase } from 'scule'

export interface ApiEndpoint {
  url: string
  headers?: Record<string, string>
}

export interface ModuleOptions {
  endpoints: Record<string, ApiEndpoint>
}

export default defineNuxtModule<ModuleOptions>({
  meta: {},
  setup(_options, _nuxt) {
    const { resolve } = createResolver(import.meta.url)

    const getDataComposableName = (endpoint: string) => `use${pascalCase(endpoint)}Fetch`

    const endpointKeys = Object.keys(_options.endpoints)

    endpointKeys.forEach((key) => {
      addServerHandler({
        route: `/api/${key}/**`,
        handler: resolve('runtime/server/handler'),
      })

      // Rough idea of what I want to accomplish
      addTemplate({
        filename: `${getDataComposableName(key)}.ts`,
        getContents: () => {
          return `
            import { useFetch, type UseFetchOptions } from '#app'

            export const ${getDataComposableName(key)} = <T>(
              url: string | (() => string),
              options?: UseFetchOptions<T>,
            ) => {
              const baseURL = '/api/${key}'
              return useFetch(url, {
                baseURL,
                ...options,
              })
            }
          `
        },
      })
    })
  },
})
1 replies
NNuxt
Created by Dovendyret on 8/21/2024 in #❓・help
Nuxt/I18n How to fetch locales as an async function ONLY server-side
Following the official NuxtI18n documentation: https://i18n.nuxtjs.org/docs/v9/api#definei18nlocale I've defined a function for fetching my locale messages like this: 
export default defineI18nLocale(async () => {
  return await $fetch(`/api/v2/translation/en_GB`)
})
export default defineI18nLocale(async () => {
  return await $fetch(`/api/v2/translation/en_GB`)
})
However this function is executed once server-side but also again during client-side hydration. Is there any way to have the fetch only happen server-side? From my understanding it would not be possible to use the useFetch composable in this case.
1 replies
NNuxt
Created by Dovendyret on 7/2/2024 in #❓・help
Trigger page-reload on new deployments
Hey everyone, I'm working on a project and need some advice on how to efficiently implement functionality to trigger a page reload when a new deployment is triggered. This implementation needs to be able to scale across different servers behind load-balancers with 100k active users in peak periods. Here's what I have in mind: WebSocket Connection: Maintain a WebSocket connection to listen for deployment events from the server. Polling: Use a polling mechanism to regularly check for new deployments. Has anyone implemented something similar or have insights on the best approach? tips would be greatly appreciated! Thanks in advance for your help!
7 replies
NNuxt
Created by Dovendyret on 5/21/2024 in #❓・help
I18n configuration server-side
Hello 🙂 I have a app with the nuxt-i18n module and different domains. I have a server route for verifying emails: /verify-email In this server-route I'm calling an external backend which requires a locale parameter, so I need to figure which language corresponds to the incoming request host. The app runs in a few different environments which have their domains specified by .env variables. Preferably I would like to get access to the current i18n configuration in my server/route. Does anyone have any idea how I could achieve that? Thank you 🙏
2 replies
NNuxt
Created by Dovendyret on 4/30/2024 in #❓・help
Pre-render stragety for CMS content
Hello 🙂 I'm building a site which will potentially have 1000s of pages with content from a CMS. I wish to pre-render these pages, but the content from the CMS can potentially change daily. I'm thinking a potential approach similar to that of ManniL in his video: https://www.youtube.com/watch?v=Qgsd6-Hsbz4, however I don't want to pre-render all of them on every deploy if only a select few have changed. My problem is: Does anyone have a smart solution to selective only pre-render certain pages where content has changed and re-use pre-rendered pages that have not changed?
7 replies
NNuxt
Created by Dovendyret on 3/9/2024 in #❓・help
How to add meta data to specific slugs in a dynamic route
Hello everyone 🙂 I have a problem and maybe some of you can help me. I've looked through the Nuxt and Vue docs but I'm still not quite sure how to solve it. Maybe some of you have done something similar before? I have a dynamic page: /[slug] I have a CMS that contains a few hundred pages and I will be using the [slug] to fetch one of those pages. The pages are all supposed to be showing different layouts/loading-skeletons based on what kind of page is being fetched. E.g. /france should be using country-layout.vue and /paris should be using region-layout.vue Now my issue is currenly I have to use lazy: false in my useFetch() because I don't know what kind of page is being fetched initially. This in turn causes a slight delay between page navigations which is not ideal. I'm thinking I somehow need to know what kind of page I'm fetching based on the slug. I have an endpoint that returns all available slugs and the slugs' layout-types and I'm wondering if it's possible to use this information somehow doing build time. I want to be able to couple together slugs and their corresponding layout-types but I haven't figured out a way to solve this yet. Anyone knows a way to do it in Nuxt? Appricate any help or ideas, Thank you! 🙏
20 replies
NNuxt
Created by Dovendyret on 12/16/2022 in #❓・help
Nested optional route parameters
Hello 🙂 I have the following routing structure --page --[[paramA]] --index.vue --[[paramB]] --index.vue --index.vue From inspecting my genereated routes using the Vue dev tool this results in following routes: /index /index/:paramA? /index/:paramA?/:paramB? When i then navigate in the browser each of my routes will always hit the index page of my ParamB route. Eg if I in the browser navigate to /index or /index/paramA this will still result in the index page for /index/:paramA?/:paramB? However if i programmatically navigate to my route using navigateTo like: navigateTo( { name: 'index-paramA', params: { paramA: 'something' } }) Then the correct page is shown??? 😕 Am I misunderstanding how optional routes are working or can someone help me figure out how to solve this?
1 replies
NNuxt
Created by Dovendyret on 11/24/2022 in #❓・help
Storybook, Nuxt3 & NuxtLink component
Has anyone managed to implement a mock or a solution for using the <NuxtLink> component in stories? Nuxt 3.0.0 and @storybook/vue3 v6.5.13
2 replies