Fetching JSON Data from API Calls - Build Time & Run Time

[akil-rails]

I've APIs that return JSON data that I need to include in the documentation. (Swagger files and other meta-data). The data will be used in code-blocks and in el-table (from ElementPlus).

What is the suggested way to do this?

1. Is this to be done at build time? - In which case; how should the step get included, such that it works for both the dev mode and build time?
2. Is this to be done at runtime? - in which case; a sample would be of great help.

[brc-dd]

Something like this can be done:

# Todos

<table v-if="data?.length">
  <tr v-for="{ title, completed } in data">
    <td>{{ title }}</td>
    <td>{{ completed ? '✅' : '⬛'}}</td>
  </tr>
</table>

<script setup>
import { ref, onMounted } from 'vue'

const data = ref([])

onMounted(async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos')
  data.value = await res.json()
})
</script>

[brc-dd]

Create a file ending with .data.ts or .data.js:

// todos.data.ts

import fetch from 'node-fetch'

interface Todo {
  userId: number
  id: number
  title: string
  completed: boolean
}

export declare const data: Todo[]

export default {
  watch: [/* globs to watch, can be relative */], // in this particular case, you don't need it
                                                  // if your data is dependent on some files then put those here
  async load(): Promise<Todo[]> {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos')
    return res.json()
  }
}

Then in your markdown/vue file you can do this:

# Todos

<table v-if="data?.length">
  <tr v-for="{ title, completed } in data">
    <td>{{ title }}</td>
    <td>{{ completed ? '✅' : '⬛'}}</td>
  </tr>
</table>

<script setup lang="ts">
import { data } from './todos.data.js'
</script>

[akil-rails]

So my scenario is as follows:

• i have about 50+ json-schema files (committed in the same repository in public/schema)
• I've to display the json-schema (as a table with some text) in a number of different pages on the vitepress site. To do this, the markdown pages use a custom component and pass the schema as a prop .
  I'll have to pass the schema file name from the md page --> vuecomponet --> data.ts file . Correct?

[brc-dd]

You'll have to create a separate .data.ts file corresponding to every JSON schema file.

Then in a page you'll need to do this:

<YourTable :schema="aSchema" />
<YourTable :schema="bSchema" />

<script setup lang="ts">
import { data as aSchema } from './a.data.js'
import { data as bSchema } from './b.data.js'
</script>

BTW, if your JSON schema files are .json, then you can directly import them, there is no need to create a .data.ts file or fetch them.

[akil-rails]

import doesn't seem to allow files in the public folder

[brc-dd]

Place them in a separate folder and copy that folder to dist after build? It will behave similar to public.