Complete AI Training
Sign inBecome a member

Your job's AI kit

Get your AI kit

Tell us who you are and what you do. We show you your kit right away and email you the link: skills, prompts, AI agents, MCP servers and courses for your job.

500+ jobs ready, and we make a kit for any other job. No payment needed to look.

Share

Skill · Frontend

Markstream vue2

Integrate markstream-vue2 into Vue 2.6 or 2.7 with correct Composition API decisions, CSS, streaming state, optional peers, and scoped overrides.

Agentic Awesome SkillsLicense: MITAdded Sep 5, 2026
Use it in my AI

How to use it

  1. Start your plan and connect your AI once
  2. Add the skill to your AI, one time only: press Copy skill and paste it into your AI's instructions: a project in ChatGPT, Claude or Grok, a Gem in Gemini, an agent in Microsoft 365 Copilot, or a rule in Cursor. It stays there for every new chat. In Kimi, paste it at the start of a new chat.
  3. Ask for the task in your own words, or say it directly:
Use the Markstream vue2 skill to help me with this.
SKILL.md

Markstream Vue 2

Overview

Handle Vue 2.6/2.7 compatibility decisions that the generic installer cannot resolve safely.

When to Use

Use for Vue 2 integration when no bundler-specific edge case dominates. Use markstream-vue2-cli for Vue CLI/Webpack 4 and markstream-vue2-vite for Vite worker imports.

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.6 or 2.7 and install markstream-vue2.
  2. Add @vue/composition-api only for Vue 2.6 code that uses Composition API patterns; Vue 2.7 has built-in support.
  3. Import markstream-vue2/index.css after resets.
  4. Start with <MarkdownRender :content="markdown" /> and smooth streaming auto.
  5. For live chat disable fade and opt into the cursor; on completion set final, disable pacing/cursor, and enable fade only if desired.
  6. Use nodes only when another layer owns parsing. Use scoped mappings for overrides.
  7. Keep HTML safe and Mermaid strict; validate with the smallest build or dev command.

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"
    :typewriter="!done"
  />
</template>

Limitations

  • Vue 2.6 and 2.7 have different Composition API requirements.
  • Legacy bundlers require the dedicated specializations.
  • Optional modern peers may not support every Vue 2 toolchain.

Security & Safety Notes

Review dependency and compatibility changes. Do not relax rendering safety for untrusted content.