Asciinema Player

Word count

475 words

Reading time

3 minutes

Installation

Install @nolebase/ui-asciinema to your project dependencies by running the following command:

@antfu/nipnpmnpmyarn

shell

ni @nolebase/ui-asciinema

shell

pnpm add @nolebase/ui-asciinema

shell

npm install @nolebase/ui-asciinema

shell

yarn add @nolebase/ui-asciinema

Usage

Add the package to Vite's ssr.noExternal configuration. Without this, your site may not build. (Ref: Vite's ssr.noExternal config docs.)

// vite.config.ts
export default defineConfig({
  ssr: {
    noExternal: [
      "@nolebase/ui-asciinema",
    ],
  },
})

Then import NuAsciinemaPlayer and asciinema-player's stylesheet in your Vue file. (Ref: asciinema-player's styling docs.)

vue

<script setup>
// somewhere.vue
import { NuAsciinemaPlayer } from '@nolebase/ui-asciinema'
import 'asciinema-player/dist/bundle/asciinema-player.css'
</script>

<template>
  <NuAsciinemaPlayer
    src="/asciinema/test-nyancat.cast"
    :preload="true"
    :cols="400"
    :rows="40"
    :auto-play="true"
    :controls="true"
    :terminal-font-size="'12px'"
    :loop="true"
  />
</template>

VitePress

Instead of configuring Vite's ssr.noExternal in a vite.config.ts, you can configure it in the VitePress vite config. (Ref: VitePress's Vite configuration docs.)

// **/.vitepress/config.ts
export default defineConfig({
  vite: {
    ssr: {
      noExternal: [
        "@nolebase/ui-asciinema",
      ],
    },
  },
})

If the component is only used by a few pages, it's recommended to explicitly import it and the asciinema-player stylesheet where they are used. This allows them to be properly code-split and only loaded when the relevant pages are shown:

Markdown

html

<script setup>
// somewhere.md
import { NuAsciinemaPlayer } from '@nolebase/ui-asciinema'
import 'asciinema-player/dist/bundle/asciinema-player.css'
</script>

<NuAsciinemaPlayer
  src="/asciinema/test-nyancat.cast"
  :preload="true"
  :cols="400"
  :rows="40"
  :auto-play="true"
  :controls="true"
  :terminal-font-size="'12px'"
  :loop="true"
/>

Vue

vue

<script setup>
// somewhere.vue
import { NuAsciinemaPlayer } from '@nolebase/ui-asciinema'
import 'asciinema-player/dist/bundle/asciinema-player.css'
</script>

<template>
  <NuAsciinemaPlayer
    src="/asciinema/test-nyancat.cast"
    :preload="true"
    :cols="400"
    :rows="40"
    :auto-play="true"
    :controls="true"
    :terminal-font-size="'12px'"
    :loop="true"
  />
</template>

If the component is going to be used on most of the pages, it and the asciinema-player stylesheet can be registered globally by customizing the VitePress Vue app instance.

// **/.vitepress/theme/index.ts
import { NuAsciinemaPlayer } from "@nolebase/ui-asciinema";
import "asciinema-player/dist/bundle/asciinema-player.css";

export default {
  enhanceApp({ app, router, siteData }) {
    app.component("NuAsciinemaPlayer", NuAsciinemaPlayer);
  }
}

Markdown

html

<!-- somewhere.md -->

<NuAsciinemaPlayer
  src="/asciinema/test-nyancat.cast"
  :preload="true"
  :cols="400"
  :rows="40"
  :auto-play="true"
  :controls="true"
  :terminal-font-size="'12px'"
  :loop="true"
/>

Vue

vue

<!-- somewhere.vue -->

<template>
  <NuAsciinemaPlayer
    src="/asciinema/test-nyancat.cast"
    :preload="true"
    :cols="400"
    :rows="40"
    :auto-play="true"
    :controls="true"
    :terminal-font-size="'12px'"
    :loop="true"
  />
</template>