Vitepress -- insert my own JS on a particular page

[robnewport]

Sorry if this is a totally newbie question but I'd like to put a custom API query on a particular markdown page in my Vitepress site.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script language="javascript">
function callapi() {
    axios.post("https://XXXX.ap-southeast-2.amazonaws.com/v1/XXXX")
    .then(response => {
        console.log(response.data);
    }).catch(error => console.error(error));
}
</script>
<button onClick="callapi()">Test Button</button>

The script above works by itself but I can't figure out how to insert it into my particular Vitepress markdown file.

When I put the code directly in the markdown I get the error:
[plugin:vite:vue] Single file component can contain only one <script> element

If I remove the <script> src tag and I click the button I get the error:
RangeError: Maximum call stack size exceeded.

I tried searching for how to do this but I don't really even know what to search for. I'm guessing it has to do with extending the Theme? Maybe it's an enhancement?

Is there a way I can inject JS on a markdown file and I just missed it in the docs?

Any recommendations, and best practice recommendations, are appreciated.

[brc-dd]

You should just install axios: npm add axios

Then write code like this:

<script setup>
import axios from "axios";

function callapi() {
    axios.post("https://XXXX.ap-southeast-2.amazonaws.com/v1/XXXX")
    .then(response => {
        console.log(response.data);
    }).catch(error => console.error(error));
}
</script>

<button @click="callapi()">Test Button</button>

Basically you'll need to write vue code.

[robnewport]

Thank you for the reply. However, when I click the button I get the error:
RangeError: Maximum call stack size exceeded.

This error is not seen in standalone version of the JS.

EDIT: The code works when I run it outside the button press, e.g. on page load. However, the button appears to be causing the problem. Thanks!

[brc-dd]

Ah, not sure. Seems like a vue bug. Try something like this maybe?

<script setup>
import axios from "axios";

async function callapi() {
  try {
    const response = await axios.post("https://XXXX.ap-southeast-2.amazonaws.com/v1/XXXX");
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}
</script>

<button @click="callapi">Test Button</button>

[robnewport]

@brc-dd Thank you Divyansh! This totally solved my issues.