How to integrate paths of tsconfig with vitepress?

[zhangzhuang15]

I'm recently confused by paths of tsconfig.json when I use vitepress v1.0.0-beta.2.

My project:

.
├── .vitepress
│         ├── config.ts
│         ├── theme
│              ├── components
│              ├── config
│              ├── custom.css
│              └── index.ts
├── docs
│   ├── blog
│   ├── downloader
│   ├── frontend
│   ├── go
│   ├── index.md
│   ├── me
│   ├── open-source
│   ├── public
│   ├── rust
│   └── tool
├── package-lock.json
├── package.json
└── tsconfig.json

.vitepress/config.ts:

export default defineConfig({
    // ignore unrelated codes
     srcDir: "./docs",
     vite: {
        server: {
             fs: {
                allow: ["../.."]
             }
        }
     }
});

tsconfig.json:

{
    "compilerOptions": {
     /** ignore unrelated codes **/
        "paths": {
            "@theme/*": [".vitepress/theme/*"],
         },
   }
}

docs/index.md:

---
page: true
---

<script setup>
  import Home from "@theme/components/Home.vue"
</script>

<Home />

It works very well.

But when I make changes:
tsconfig.json

{
    "compilerOptions": {
     /** ignore unrelated codes **/
        "paths": {
            "@components/": [".vitepress/theme/components/*"],
         },
   }
}

docs/index.md

---
page: true
---

<script setup>
  import Home from "@components/Home.vue"
</script>

<Home />

As a result, there is a bug, which tells me that cannot resolve @components/Home.vue.

Why?

Is there a black magic behind @theme or .vitepress/theme ?

Any answers will be appreciated!

[brc-dd]

Is there a black magic behind @theme or .vitepress/theme ?

Yes. @theme imports have different meaning. For @components/ you need to configure vite aliases along with tsconfig too:

something like this should work:

// .vitepress/config.ts
import { fileURLToPath } from 'node:url'
import { defineConfig } from 'vitepress'

export default defineConfig({
 vite: {
    resolve: {
      alias: {
        '@components': fileURLToPath(new URL('./theme/components', import.meta.url))
      }
    }
  }
})

[zhangzhuang15]

Thank you! After reading your reply, I search @theme in vitepress source code and find that there is a baseConfig including it! baseConfig merges userConfig , as a result, vitepress config will be resolved.