Using codeblock or code snippet inside component

DerManoMann commented 2 years ago

This might be more a fundamental Vue question, so please excuse my ignorance.

I've been trying to use https://github.com/Jacobs63/vue3-tabs-component to render tabs inside my docs and that itself works fine.

However, the real reason was to have code examples in tabs with each tab showing the same example in a different style / language. It looks to me as if that is not possible due to encoding of the provided raw content.

I've tried v-html and v-pre with no luck. Any suggestions or a definitive "Doesn't work" would be appreciated.

brc-dd commented 2 years ago

You probably forgot to put some blank lines to separate Vue and Markdown code.

Here is a demo:

# Installation

<tabs>
  <tab name="NPM">

```bash
npm i -D vitepress

```bash yarn add -D vitepress ```



It will be rendered like this:

![image](https://user-images.githubusercontent.com/40380293/167641446-722b8938-ba1d-4734-b0e3-a8b3a296c086.png)

DerManoMann commented 2 years ago

Indeed, that did the trick.

Thanks so much for the fast answer and taking the time for the demo - stackblitz looks pretty cool.

DerManoMann commented 2 years ago

Unfortunately I hit another issue. Running vitepress dev . does work fine and pages do render correctly. However, vitepress build . does break :/

✓ building client + server bundles...
⠙ rendering pages...ReferenceError: window is not defined
    at setup (../docs/.vitepress/.temp/app.js:1863:52)
    at _sfc_main.setup (../docs/.vitepress/.temp/app.js:1929:23)
    at callWithErrorHandling (../docs/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:119:22)
    at setupStatefulComponent (../docs/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5738:29)
    at setupComponent (../docs/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5719:11)
    at renderComponentVNode (../docs/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:195:17)
    at Object.ssrRenderComponent (../docs/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:626:12)
    at _sfc_ssrRender (../docs/.vitepress/.temp/index.md.js:13:24)
    at renderComponentSubTree (../docs/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:266:13)
    at renderComponentVNode (../docs/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:211:16)
✓ rendering pages...

My theme index.js looks like this:

import DefaultTheme from "vitepress/theme";
import {Tabs, Tab} from 'vue3-tabs-component';
import "./tabs.css";
import "./custom.css";

export default {
    ...DefaultTheme,
    enhanceApp({ app, router, siteData }) {
        app.component('tabs', Tabs);
        app.component('tab', Tab);
    },
};

The tab code that makes things break:

  <div>
    <tabs>
      <tab :id="anId" name="Annotations">
        Yo
      </tab>
      <tab :id="atId" name="Attributes">
        Foo
      </tab>
    </tabs>
  </div>

Removing the tab markup makes the build pass.

brc-dd commented 2 years ago

Those components are not SSR friendly, wrap them with <client-only>.

<client-only>
  <tabs>
    <tab id="anId" name="Annotations">
      Foo
    </tab>
    <tab id="atId" name="Attributes">
      Bar
    </tab>
  </tabs>
</client-only>

DerManoMann commented 2 years ago

Thank you so much, again - works!

brc-dd commented 2 years ago

Its latest version should work without <client-only> too:

vuejs / vitepress

Using codeblock or code snippet inside component #621