Add "Index Page" feature

[kiaking]

It would be great to have index page where it lists all subpage headings like Vue.js API page.

This feature would be especially useful for pages like API and config references. The idea is to fetch crawl pages based on sidebar menu structure, and list all headings with in the page, separating them into each section (box in Vue.js API example).

Not 100% sure how Vue.js website is doing this at the moment, but we should first come up with good API design (how to configure this page).

[yyx990803]

This is done using the "static data import" feature: https://github.com/vuejs/docs/blob/main/src/api/api.data.ts

I believe it's not fully documented at the moment, but essentially:

• Create a file ending in .data.ts or .data.js

• In the file, export default an object:

  // example.data.ts
  interface Data {}
  
  export declare const data: Data
  
  export default {
    watch: [/* globs to watch, can be relative */],
    async load(): Promise<Data> {
      // read the files, return transformed data
    }
  }
  

• In any other file:

  <script setup>
  import { data } from './example.data.js'
  console.log(data)
  </script>
  

The data loader file is only executed at build time - the module is directly transformed into inlined JSON.

[isorna]

Hi, I've tried to follow the documentation at Build-Time Data Loading, and after some problems I reallized that if I use the .js extension on the import, vite doesn't find the generated file:

<script setup>
import { data } from './example.data'
console.log(data)
</script>

I'd like to ask for a clarification on the documentation site, and also some lines explaining where should the .data.ts file be, as it's not clear that it mus be located on the same folder as the .md files it uses.

Regards

[alephpi]

Hi, I've tried to follow the documentation at Build-Time Data Loading, and after some problems I reallized that if I use the .js extension on the import, vite doesn't find the generated file:

<script setup>
import { data } from './example.data'
console.log(data)
</script>

I'd like to ask for a clarification on the documentation site, and also some lines explaining where should the .data.ts file be, as it's not clear that it mus be located on the same folder as the .md files it uses.

Regards

Today I met same issue as you mentioned. Based on stupid tries, here are some experience (but I don't know why):

1. .data.ts could not be necessarily on the same folder. As I could import it from ../.data for example.
2. make sure it only has the default export
3. do not add extension .js/.ts
4. wherever it is, always use glob pattern relative to project root

[brc-dd]

Let's track #2699 here itself.