Can't use tres in latest version of vitepress

[bd-dxg]

Describe the bug

I tried to add the 3d image of the tres build in vitepress, but it failed, I did everything according to the instructions on the official website documentation

Reproduction

https://stackblitz.com/edit/vite-vmh2csdn?file=package.json

Steps to reproduce

npm run docs:dev

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (20) x64 13th Gen Intel(R) CoreT i7-13800H
    Memory: 17.19 GB / 31.74 GB
  Binaries:
    Node: 24.8.0 - ~\AppData\Local\pnpm\node.EXE
    npm: 11.6.0 - ~\AppData\Local\pnpm\npm.CMD
    pnpm: 10.15.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (140.0.3485.54)
  npmPackages:
    @tresjs/core: ^5.0.2 => 5.0.2
    vitepress: 2.0.0-alpha.12 => 2.0.0-alpha.12

Used Package Manager

pnpm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[alvarosabu]

Hi @bd-dxg thanks for reaching out.

You need to replace this block in your config.ts

vite: {
    plugins: [
      vue({
        ...templateCompilerOptions,
      }),
    ],
  },

with

 vue: {
    ...templateCompilerOptions,
  },

https://stackblitz.com/~/edit/vite-av1pah8l?file=docs/.vitepress/config.ts

[bd-dxg]

Hi @bd-dxg thanks for reaching out.

You need to replace this block in your config.ts

vite: {
plugins: [
vue({
...templateCompilerOptions,
}),
],
},
with

vue: {
...templateCompilerOptions,
},
https://stackblitz.com/~/edit/vite-av1pah8l?file=docs/.vitepress/config.ts

Are you sure?

Would you please wait until the program is up and running to make sure there are no problems before you close my issue?

[userquin]

You shouldn't register the vue plugin, VP will do it for you:

https://stackblitz.com/~/edit/vite-sy7hbac3?file=docs/.vitepress/config.ts:L36-L42

vue: {
    template: {
      compilerOptions: {
        isCustomElement: templateCompilerOptions.template.compilerOptions.isCustomElement
      },
    },
  },

[userquin]

upps: https://stackblitz.com/edit/vite-sy7hbac3?file=docs%2F.vitepress%2Fconfig.ts

[bd-dxg]

upps: https://stackblitz.com/edit/vite-sy7hbac3?file=docs%2F.vitepress%2Fconfig.ts

I don't know what to say, I appreciate your warm replies, but it would be nice if they were problem solving.

@userquin @alvarosabu If the problem isn't solved, can you open my issue? I don't have access anymore.

[alvarosabu]

Hi @bd-dxg

Are you sure?

Yes

Did you try the solution I posted above? It's the same as @userquin is mentioning, you don't need to re-register the vue plugin, just change its config using, and then Vitepress will run as expected

 vue: {
    ...templateCompilerOptions,
  },

Regarding

I'm afraid that's now how you should include components in Vitepress, you need to extend the theme using a file docs/.vitepress/theme/index.ts with

// https://vitepress.dev/guide/custom-theme
import Theme from 'vitepress/theme'
import Scene from '../../components/Scene.vue'

export default {
  ...Theme,
  enhanceApp(ctx) {
    Theme.enhanceApp(ctx)
    ctx.app.component('Scene', Scene)

  },
}

Being Scene.vue your scene with the TresCanvas

I updated the stackblitz with a complete working solution https://stackblitz.com/~/edit/vitepress-tres?file=docs/.vitepress/theme/index.ts:L1-L12&file=docs/components/Scene.vue&initialPath=/example please confirm me if it works 😊

[userquin]

Use this to register your global components (you can also use unplugin-vue-components in your vite.config.ts file): https://vitepress.dev/guide/extending-default-theme#registering-global-components

[bd-dxg]

Hi @bd-dxg

Are you sure?

Yes

Did you try the solution I posted above? It's the same as [@userquin](https://github.com/userquin) is mentioning, you don't need to re-register the vue plugin, just change its config using, and then Vitepress will run as expected

 vue: {
    ...templateCompilerOptions,
  },

Regarding

I'm afraid that's now how you should include components in Vitepress, you need to extend the theme using a file `docs/.vitepress/theme/index.ts` with

// https://vitepress.dev/guide/custom-theme
import Theme from 'vitepress/theme'
import Scene from '../../components/Scene.vue'

export default {
...Theme,
enhanceApp(ctx) {
Theme.enhanceApp(ctx)
ctx.app.component('Scene', Scene)

},
}
Being Scene.vue your scene with the TresCanvas

I updated the stackblitz with a complete working solution https://stackblitz.com/~/edit/vitepress-tres?file=docs/.vitepress/theme/index.ts:L1-L12&file=docs/components/Scene.vue&initialPath=/example please confirm me if it works 😊

Hi, thanks for the kind reply, I went to stackblitz from your link, and found that the project doesn't contain theme/index.ts, and scene.vue doesn't have a script tag, and then there are a lot of warnings in the terminal, I don't know if that's the case on your end.

2025-10-15_00-57-50.mp4

When I complete the missing files, the console still reports the error.

[userquin]

Use the code in the VP docs, you're breaking components registration, use extends instead manual invocation: https://vitepress.dev/guide/extending-default-theme#registering-global-components

[bd-dxg]

Use the code in the VP docs, you're breaking components registration, use extends instead manual invocation: https://vitepress.dev/guide/extending-default-theme#registering-global-components

I don't quite get it, I was going to apply the effect to the front page, the link you gave is to the VP docs?