Skip to content
/ repl Public
forked from vuejs/repl

Vue SFC REPL as a Vue 3 component

Notifications You must be signed in to change notification settings

CaiWenlie/repl

This branch is 3 commits ahead of, 396 commits behind vuejs/repl:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Mar 21, 2023
b3b9d95 · Mar 21, 2023
Jan 29, 2023
May 25, 2022
Jan 20, 2022
Jun 26, 2022
May 17, 2022
Sep 6, 2021
Sep 19, 2021
Mar 21, 2023
Jan 29, 2023
Sep 9, 2021
Mar 21, 2023
Sep 27, 2022
Mar 21, 2023

Repository files navigation

@vue/repl

Vue SFC REPL as a Vue 3 component.

Simple Usage

<script setup>
import { Repl } from '@vue/repl'
import '@vue/repl/style.css'
</script>

<template>
  <Repl />
</template>

Advanced Usage

<script setup>
import { watchEffect } from 'vue'
import { Repl, ReplStore } from '@vue/repl'

// retrieve some configuration options from the URL
const query = new URLSearchParams(location.search)

const store = new ReplStore({
  // initialize repl with previously serialized state
  serializedState: location.hash.slice(1),

  // starts on the output pane (mobile only) if the URL has a showOutput query
  showOutput: query.has('showOutput'),
  // starts on a different tab on the output pane if the URL has a outputMode query
  // and default to the "preview" tab
  outputMode: (query.get('outputMode') || 'preview'),

  // specify the default URL to import Vue runtime from in the sandbox
  // default is the CDN link from unpkg.com with version matching Vue's version
  // from peerDependency
  defaultVueRuntimeURL: 'cdn link to vue.runtime.esm-browser.js'
})

// persist state to URL hash
watchEffect(() => history.replaceState({}, '', store.serialize()))

// pre-set import map
store.setImportMap({
  imports: {
    myLib: 'cdn link to esm build of myLib'
  }
})

// use a specific version of Vue
store.setVueVersion('3.2.8')
</script>

<template>
  <Repl :store="store" :showCompileOutput="true" />
</template>

About

Vue SFC REPL as a Vue 3 component

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 42.4%
  • Vue 32.0%
  • CSS 13.5%
  • HTML 12.1%