Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Option to display only the preview without editor #290

Closed
iojanis opened this issue Oct 18, 2024 · 2 comments · May be fixed by #291
Closed

Feature Request: Option to display only the preview without editor #290

iojanis opened this issue Oct 18, 2024 · 2 comments · May be fixed by #291
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@iojanis
Copy link

iojanis commented Oct 18, 2024

Hello @vue/repl maintainers,

I'd like to propose a new feature for @vue/repl: an option to display only the preview without requiring the Monaco/CodeMirror editor.

Current Behavior

Currently, the editor prop is required even when we only want to show the preview. This means we need to import and pass the editor even when we don't intend to use it.

Desired Behavior

It would be beneficial to have a way to use @vue/repl solely for displaying the preview of Vue components, without the editor functionality.

Use Case

I have the source code in a different component and don't want to use the built-in Monaco editor. I need a way to display only the preview of the compiled code.

Thank you for considering this feature request :)

@sxzz sxzz added enhancement New feature or request good first issue Good for newcomers labels Oct 18, 2024
@mg5566
Copy link

mg5566 commented Oct 20, 2024

Can I try?

@wangcch
Copy link
Collaborator

wangcch commented Feb 19, 2025

Now we can use preview standalone in version ^4.5.1.
https://github.com/vuejs/repl?tab=readme-ov-file#advanced-usage

<script setup>
import { ref } from 'vue'
import { Sandbox, useStore } from '@vue/repl'

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

const store = useStore(
  {
    // custom vue version
    vueVersion: ref(query.get('vue')),
  },
  // initialize repl with previously serialized state
  location.hash,
)
</script>

<template>
  <Sandbox :store="store" />
</template>

@wangcch wangcch closed this as completed Feb 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants