Skip to content
Skillv1.0.0

markstream-vue2-vite

Integrate markstream-vue2 into Vue 2 plus Vite with bundled worker imports, CSS ordering, Composition API compatibility, and safe streaming defaults.

by sickn33(0) 0 installs
Free
Sign in to install

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Imported from sickn33/agentic-awesome-skills (skills/markstream-vue2-vite/SKILL.md). Install upstream with npx skills add sickn33/agentic-awesome-skills --skill markstream-vue2-vite. Copyright stays with the author (MIT).

Markstream Vue 2 Vite

Overview

Use Vite-native worker bundling while preserving Vue 2 compatibility and rendering safety.

When to Use

Use when the host is Vue 2 with Vite and needs bundled Mermaid or KaTeX workers. Use the generic Vue 2 skill when worker/bundler behavior is irrelevant.

Workflow

Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.

  1. Confirm Vue 2 with Vite and install only requested peers.
  2. Import markstream-vue2/index.css after reset, Tailwind, or UnoCSS layers.
  3. Use package worker entrypoints with Vite ?worker or ?worker&inline imports only when needed.
  4. Add @vue/composition-api only for Vue 2.6 code requiring it.
  5. Keep content with smooth streaming for chat; set final and disable pacing/cursor for history.
  6. Use nodes only for externally owned parsing. Keep HTML safe and Mermaid strict.
  7. Validate the Vite build and worker loading path.

Example

<script>
import MarkdownRender from 'markstream-vue2'
import 'markstream-vue2/index.css'

export default {
  components: { MarkdownRender },
  props: { content: String, done: Boolean },
}
</script>

<template>
  <MarkdownRender
    :content="content"
    :final="done"
    :fade="done"
  />
</template>

Limitations

  • Vite worker syntax is not portable to Vue CLI/Webpack 4.
  • Inline workers can increase bundle size.
  • Optional peers may impose additional browser requirements.

Security & Safety Notes

Review worker source, CSP, dependency changes, and bundle impact. Do not relax safe rendering defaults.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml
targets:
  - https://api.opensmartroute.ai/api/v1/registry/sickn33-agentic-awesome-skills-markstream-vue2-vite/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

sickn33-agentic-awesome-skills-markstream-vue2-vite.ocm.jsonjson
{
  "ocm": "1",
  "id": "sickn33-agentic-awesome-skills-markstream-vue2-vite",
  "kind": "skill",
  "name": "markstream-vue2-vite",
  "description": "Integrate markstream-vue2 into Vue 2 plus Vite with bundled worker imports, CSS ordering, Composition API compatibility, and safe streaming defaults.",
  "publisher": "sickn33",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "vue2",
      "vite",
      "markdown",
      "workers",
      "streaming",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Integrate markstream-vue2 into Vue 2 plus Vite with bundled worker imports, CSS ordering, Composition API compatibility, and safe streaming defaults."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/sickn33/agentic-awesome-skills",
      "path": "skills/markstream-vue2-vite/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/sickn33/agentic-awesome-skills/blob/HEAD/skills/markstream-vue2-vite/SKILL.md",
      "key": "sickn33/agentic-awesome-skills/skills/markstream-vue2-vite/SKILL.md"
    },
    "license": "MIT"
  },
  "instructions": "# Markstream Vue 2 Vite\n\n## Overview\n\nUse Vite-native worker bundling while preserving Vue 2 compatibility and rendering safety.\n\n## When to Use\n\nUse when the host is Vue 2 with Vite and needs bundled Mermaid or KaTeX workers. Use the generic Vue 2 skill when worker/bundler behavior is irrelevant.\n\n## Workflow\n\nBefore changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.\n\n1. Confirm Vue 2 with Vite and install only requested peers.\n2. Import `markstream-vue2/index.css` after reset, Tai",
  "cost": {
    "context_tokens": 417
  }
}

Fetch it by URL: GET /api/v1/registry/sickn33-agentic-awesome-skills-markstream-vue2-vite/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.