Trying to start dev

[benoitbohnke]

I wanted to give it a try but can't set it up correctly..

I've got Couldn't prefetch kirbySite KQL query: (404 Not Found (http://blablabla:8888/api/kql))

when trying to connect to http://localhost:3000

I set up my .env file like this : NUXT_PUBLIC_SITE_URL=http://blablabla:8888/ KIRBY_BASE_URL=http://blablabla:8888/ KIRBY_API_TOKEN=6883351828

what did I miss ?

[johannschopplich]

Unfortunately, that's too little information. You haven't set up the Kirby Headless Starter correctly, I guess. Please read into #1 and then come back if your issue persists. Thanks.

[Gianlucamonaco]

Hi there!

First of all, thanks for the starterkit(s), I am new to Nuxt but it all looks promising and I’m really looking forward to use it at its best. I'm writing here because it looks like I’m having a similar issue to some other people.

I tried to follow all the recommendations:

• Clone both kirby-nuxt-starter and kirby-headless-starter
• Make sure .env files are looking good on both sides (nuxt and headless)
• Use Valet to serve Kirby locally, configured to use HTTPS
• Fetch data successfully with Insomnia via basicAuth and Bearer token.

After the setup, I tried for two days to fetch data from my https://headless-nuxt.test without success. I did a lot of tests with useKql(), useFetch(), fetch(), I even tried the IPv6 trick mentioned in the #1, but no luck.

---

Then I did this test, where I run in parallel useKql() and useFetch(), using the same params:

<script>
// ------------------------

// TEST 1: useKql()

const { data: dataWithKql } = await useKql({ query: 'site' });
const { result: resultWithKql } = dataWithKql?.value ?? {};

// ------------------------

// TEST 2: useFetch()

// Note: I made these two const available for testing purposes
const { KIRBY_BASE_URL, KIRBY_API_TOKEN } = useRuntimeConfig().app;

const api = `${KIRBY_BASE_URL}/api/kql`;
const headers = {
  Authorization: `Bearer ${KIRBY_API_TOKEN}`,
  "Content-Type": "application/json; charset=UTF-8",
  Accept: "application/json",
};

const { data: dataWithFetch } = await useFetch(api, {
  method: "post",
  body: { query: "site" },
  headers,
});

const { result: resultWithFetch } = dataWithFetch?.value ?? {};
</script>

<template>
  <div>
      <div>BaseURL: {{ KIRBY_BASE_URL }}</div>
      <div>With useKql():<br />{{ resultWithKql }}</div>
      <div>With useFetch():<br />{{ resultWithFetch }}</div>
    </div>
</template>

---

✅ Case 1: if I set KIRBY_BASE_URL to your https://kirby-headless-starter.jhnn.dev, both methods work:

---

❌ Case 2: if I set KIRBY_BASE_URL to my https://headless-nuxt.test, only useFetch() method is successful:

---

Do you have an clue of why would that happen? Thanks in advance!

[johannschopplich]

@Gianlucamonaco Thanks for the thorough investigation. It may be related to usage of HTTPS. Under the hood, Nuxt KQL uses useAsyncData alongside $fetch, which is the same Nuxt uses to compose useFetch.

Unfortunately, I'm not sure how to debug this, since I don't have access to the same setup you use. Personally, I use Valet as well. Just not in HTTP context for the Kirby backend. Can you try disabling HTTPS on your local machine? I'm not sure your issue is related to Nuxt KQL. Could you provide a minimum reproduction?

[Jorckx]

I've bumped into the same problem unfortunally. On my Imac it works as expected. On my macbook the useKql gives the same error. However with valet it does seem to work :) I'll try to look into the different configurations and will come back to it if I've found it.

[johannschopplich]

Closing this, as it is not an issue of KQL or Kirby itself, but rather how Nuxt and HTTPS has to be set up.

If you need further help, feel free to book some consulting from me. 🙂