Skip to content
/ repl Public

A Vue component to create a TresJS sandbox. Based on sfc.vuejs.org.

License

Notifications You must be signed in to change notification settings

Tresjs/repl

Folders and files

NameName
Last commit message
Last commit date
Nov 7, 2023
Nov 10, 2023
Nov 10, 2023
Nov 7, 2023
Jul 26, 2024
Jan 22, 2024
Nov 10, 2023
Nov 7, 2023
Nov 7, 2023
Nov 7, 2023
Jan 13, 2024
Nov 7, 2023
Jan 13, 2024
Jan 13, 2024
Jul 26, 2024
Jul 26, 2024
Nov 7, 2023
Nov 7, 2023
Nov 7, 2023
Jan 13, 2024
Jul 26, 2024

Repository files navigation

@tresjs/repl

TresJS repl as a Vue 3 component.

With Monaco Editor

With Volar support, autocomplete, type inference, and semantic highlighting. Heavier bundle, loads dts files from CDN, better for standalone use cases.

<script setup>
import { Repl } from '@tresjs/repl'
import Monaco from '@tresjs/repl/monaco-editor'
import '@tresjs/repl/style.css'
</script>

<template>
  <Repl :editor="Monaco" />
</template>

Advanced Usage

Customize the behavior of the REPL by manually initializing the store.

<script setup>
import { watchEffect } from 'vue'
import { Repl, ReplStore } from '@tresjs/repl'
import Monaco from '@tresjs/repl/monaco-editor'

// 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 repl
  // default is the CDN link from jsdelivr.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" :editor="Monaco" :showCompileOutput="true" />
</template>