[Bug report] Documentation shows .vue files for the "Markdown and Vue SFC" portion of the cookbook

[nicobaguio]

Description

Documentation for the Markdown and Vue SFC section of the cookbook shows a vue file being used.

But using a vue file (for example in ./docs/.vuepress/README.vue) doesn't work. I'm not sure what the bug is. is it:

a) documentation is wrong. You can write Markdown files as if it's a Vue SFC (this works), but it should be a .md file type still (instead of .vue file type) OR

b) we should be able to write .vue files in place of .md, following the right directory design, and it should work.

Reproduction

https://stackblitz.com/edit/vuepress-byzwtv?file=docs%2FREADME.vue

Used Package Manager

npm

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (12) x64 AMD Ryzen 5 5600 6-Core Processor
    Memory: 3.23 GB / 15.93 GB
  Binaries:
    Node: 21.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 10.2.5 - C:\Program Files\nodejs\npm.CMD
  Utilities:
    Git: 2.33.0. - /mingw64/bin/git
  Browsers:
    Chrome: 87.0.4280.88
    Edge: Chromium (120.0.2210.91)
  npmPackages:
    @vuepress/bundler-vite:  2.0.0-rc.0
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli:  2.0.0-rc.0
    @vuepress/client:  2.0.0-rc.0
    @vuepress/core:  2.0.0-rc.0
    @vuepress/markdown:  2.0.0-rc.0
    @vuepress/plugin-active-header-links:  2.0.0-rc.0
    @vuepress/plugin-back-to-top:  2.0.0-rc.0
    @vuepress/plugin-container:  2.0.0-rc.0
    @vuepress/plugin-docsearch: Not Found
    @vuepress/plugin-external-link-icon:  2.0.0-rc.0
    @vuepress/plugin-git:  2.0.0-rc.0
    @vuepress/plugin-google-analytics: Not Found
    @vuepress/plugin-medium-zoom:  2.0.0-rc.0
    @vuepress/plugin-nprogress:  2.0.0-rc.0
    @vuepress/plugin-palette:  2.0.0-rc.0
    @vuepress/plugin-prismjs:  2.0.0-rc.0
    @vuepress/plugin-pwa: Not Found
    @vuepress/plugin-pwa-popup: Not Found
    @vuepress/plugin-register-components: Not Found
    @vuepress/plugin-search: Not Found
    @vuepress/plugin-shiki: Not Found
    @vuepress/plugin-theme-data:  2.0.0-rc.0
    @vuepress/plugin-toc: Not Found
    @vuepress/shared:  2.0.0-rc.0
    @vuepress/theme-default:  2.0.0-rc.0
    @vuepress/utils:  2.0.0-rc.0
    vue:  3.3.13
    vue-loader: Not Found
    vue-router:  4.2.5
    vuepress: ^2.0.0-rc.0 => 2.0.0-rc.0
    vuepress-vite:  2.0.0-rc.0
    vuepress-webpack: Not Found

[meteorlxy]

Well, the vue indicator in the top right corner is for syntax hightlighting, it should be .md file in fact. I think it will be improved after vuepress/core#1456 is supported.