dwol
dwol
PostsComments
NNuxt
Created by dwol on 5/21/2024 in #❓・help
How to prerender nuxt-content with nuxt generate and ssr:false?
Is there an offical way to prerender nuxt-content using nuxt generate? Ive found this on github: https://github.com/nuxt/content/issues/1746, 
content: {
    experimental: {
      clientDB: true
    }
  }
content: {
    experimental: {
      clientDB: true
    }
  }
I think its working but it still gives me this warning when running nuxt generate HTML content not prerendered because ssr: false was set.. Also that config is not found in the nuxt content docs at all.
1 replies
NNuxt
Created by dwol on 5/9/2024 in #❓・help
Does anyone know how to mock/assert that navigateTo was called with the correct options?
Basically I have a function thats called after submitting a form and the function returns a navigateTo an external payment portal. how can I test that the navigateTo method was called with the correct options? 
/// ~/utils/handlePaymentRedirect.ts
export function handlePaymentRedirect (payToken: number, filingId: number) {
  const config = useRuntimeConfig()
  const { locale } = useI18n()
  const paymentUrl = config.public.paymentPortalUrl
  const baseUrl = config.public.baseUrl
  const returnUrl = encodeURIComponent(`${baseUrl}${locale.value}/submitted?filing_id=${filingId}`)
  const payUrl = paymentUrl + payToken + '/' + returnUrl

  return navigateTo(payUrl, { external: true })
}
/// ~/utils/handlePaymentRedirect.ts
export function handlePaymentRedirect (payToken: number, filingId: number) {
  const config = useRuntimeConfig()
  const { locale } = useI18n()
  const paymentUrl = config.public.paymentPortalUrl
  const baseUrl = config.public.baseUrl
  const returnUrl = encodeURIComponent(`${baseUrl}${locale.value}/submitted?filing_id=${filingId}`)
  const payUrl = paymentUrl + payToken + '/' + returnUrl

  return navigateTo(payUrl, { external: true })
}
2 replies
NNuxt
Created by dwol on 5/1/2024 in #❓・help
How can I mock or stub Keycloak in unit tests?
So basically I have a nuxt plugin to setup Keycloak, how can I mock or stub keycloak during unit tests? This is my plugin 
import Keycloak from 'keycloak-js'

export default defineNuxtPlugin(async (_nuxtApp) => {
  const config = useRuntimeConfig()
  const keycloak = new Keycloak({
    url: config.public.keycloakAuthUrl,
    realm: config.public.keycloakRealm,
    clientId: config.public.keycloakClientId
  })

  try {
    // init keycloak instance
    await keycloak.init({
      onLoad: 'check-sso',
      responseMode: 'query',
      pkceMethod: 'S256'
    })

  } catch (error) {
    console.error('Failed to initialize Keycloak adapter: ', error)
  }

  return {
    provide: {
      // provide global keycloak instance
      keycloak
    }
  }
}) 
import Keycloak from 'keycloak-js'

export default defineNuxtPlugin(async (_nuxtApp) => {
  const config = useRuntimeConfig()
  const keycloak = new Keycloak({
    url: config.public.keycloakAuthUrl,
    realm: config.public.keycloakRealm,
    clientId: config.public.keycloakClientId
  })

  try {
    // init keycloak instance
    await keycloak.init({
      onLoad: 'check-sso',
      responseMode: 'query',
      pkceMethod: 'S256'
    })

  } catch (error) {
    console.error('Failed to initialize Keycloak adapter: ', error)
  }

  return {
    provide: {
      // provide global keycloak instance
      keycloak
    }
  }
})
Then I've tried to stub useNuxtApp like this, ive also tried mocking using mockNuxtImport 
vi.stubGlobal('useNuxtApp', () => ({
      $keycloak: {
        login: mockLogin,
        logout: vi.fn(),
        loadUserProfile: vi.fn(),
        authenticated: false,
        tokenParsed: mockParsedToken
      }
    }))
vi.stubGlobal('useNuxtApp', () => ({
      $keycloak: {
        login: mockLogin,
        logout: vi.fn(),
        loadUserProfile: vi.fn(),
        authenticated: false,
        tokenParsed: mockParsedToken
      }
    }))
But I still get this error Failed to initialize Keycloak adapter: clientId missing Can anyone point me in the right direction?
1 replies
NNuxt
Created by dwol on 4/11/2024 in #❓・help
Calling `useRoute` within "middleware may lead to misleading results" when watching "locale"
Console warning when watching locale in a useAsyncData call. console warning: "index.vue:17 [nuxt] Calling useRoute within middleware may lead to misleading results. Instead, use the (to, from) arguments passed to the middleware to access the new and old routes." I am using this call to query nuxt-content and watching the locale to auto refetch 
const { data } = await useAsyncData(
  'some-id',
  () => {
    return queryContent()
      .where({ _locale: locale.value,    _extension: { $eq: 'yml' }, _path: {       $contains: 'some-path' } })
      .findOne()
  },
  {
    watch: [locale]
  }
)
const { data } = await useAsyncData(
  'some-id',
  () => {
    return queryContent()
      .where({ _locale: locale.value,    _extension: { $eq: 'yml' }, _path: {       $contains: 'some-path' } })
      .findOne()
  },
  {
    watch: [locale]
  }
)
But when I change the locale I get the warning posted above. Is this safe to ignore? I only get the error when changing the locale with 'switchLocalePath', not when I manually change the locale, but then I lose out on lazy loading and need to manually update the route.path
3 replies
NNuxt
Created by dwol on 3/14/2024 in #❓・help
How to prerender a md file that isn't used as a route?
Essentially I have some markdown in content/markdown.md and I'm using that markdown with <ContentRenderer /> inside a vue component. I cannot figure out how to prerender that file when running nuxt generate
1 replies
NNuxt
Created by dwol on 4/5/2023 in #❓・help
Prop value from vue component inside a nuxt-content prose code block?
Does anyone know a way to use a prop from a component inside a prose code block? I am trying to create a dynamic component that displays a copyable code block for an api. Passing the api key property into the md file only works if i use inline blocks, which defeats the purpose of having the code block highlighting
1 replies