Socket
Socket
Sign inDemoInstall

@vue/repl

Package Overview
Dependencies
21
Maintainers
7
Versions
87
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @vue/repl

Vue component for editing Vue components


Version published
Maintainers
7
Created

Changelog

Source

1.5.0 (2023-06-14)

Bug Fixes

  • add ts and json mode (#37) (0e467af)
  • console logging for component instance proxies (#62) (bb0e143)
  • css update in ssr mode (3b7e511), closes #91 #92
  • Fix reason.message not existing case (#54) (2508030)
  • improve code gen when using cssVars in SSR (#85) (7e2bcc8)
  • improve code with optional chain (#72) (b8caeae)
  • prevent opening new tab for a tags with javascript href (#94) (64906a5)
  • process all files when dynamic import (#60) (7049ae0)

Features

  • add sublime keymap (#45) (29263d8)
  • add file renaming (#63) (eb41c3a)
  • add search and replace (#67) (4ca3d94)
  • local JSON files (#82) (db076eb)
  • support for sandbox page customization (#42) (a22b969)

Readme

Source

@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>

FAQs

Last updated on 14 Jun 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc