0.2.1 β’ Published 3 years ago
vue-sfc-sandbox v0.2.1
Vue SFC Sandbox
Vue SFC Sandbox built on top of
@vue/compiler-sfc
, Sandbox as a Vue 3 component.
πΌοΈ Preview
β¨ Features
π³οΈ Sandbox
- πͺ Fully Typed
- π Virtual File System (Support Compile
.vue/.js
File). based on vue-sfc2esm - π¬ Friendly Error Tips. based on vue-sfc2esm
- π§ͺ Transpiled SFC File to ES Modules.
- π Support Externals CDN, like unpkgγjsdelivr etc.
- 𧩠Load Import Maps as ES Modules.
- π¨ Built-in Compile
windicss
on the fly, also supportattributify
mode.
βοΈ Editor Panel
- π¨ Themeable Editor based on Monaco Editor
- π§βπ» Developer Friendly, built-in syntax highlighting
- βοΈ REPL Sandbox with Split Panes, Split
<template>
&<script>
tag
π Preview Panel
- β‘οΈ Runtime Compile SFC File
- π Fullscreen View
- π Darkmode
π‘ Inspiration
This project is heavily inspired by Vue SFC Playground. Actually Copied from it.
π¦ Installation
yarn add vue-sfc-sandbox -S
or
npm i vue-sfc-sandbox -S
π Usage
Notice that
vue-sfc-sandbox
is depending on@vue/compiler-sfc
, and@vue/compiler-sfc
depending onConsolidate
packages. We need configureConsolidate
as externals invue.config.js
file.
Demos
Vue 3 Demo: Vue CLI 3.x
Vue 3
// vue.config.js in vue 3 project
module.exports = {
...
configureWebpack: {
externals: {
consolidate: 'Consolidate'
}
}
...
}
Use SFC Sandbox Component
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueSfcSandbox from 'vue-sfc-sandbox'
createApp(App)
.use(VueSfcSandbox)
.mount('#app')
In component
<template>
<!-- [ESM] default case -->
<sfc-sandbox v-bind="defaultAttrs" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'HelloWorld',
setup () {
const defaultAttrs = {
height: 200,
sfcFilename: 'DefaultDemo.vue',
sfcCode: `<template>
<h1>{{ msg }}</h1>
</template>
<script setup>
const msg = 'Hello World!'
</script>
`
}
return {
defaultAttrs
}
}
})
</script>
Props
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
height | the sandbox height unit (px) | Number | - | 400 |
import-maps | specify a import maps in the <script> element include type=\"importmap\" | String | - | - |
externals | specify some cdn like jsdelivrγunpkg | String | - | - |
sfc-filename | virtual sfc filename like HelloWorld.vue | - | - | |
sfc-code | transpile sfc code to es modules by vue-sfc2esm | String | - | - |
script-setup | whether script editor using <script setup> proposal | Boolean | - | - |
π» Development
yarn install
Compiles and hot-reloads for development
yarn serve
Compiles and minifies for production
yarn build
Lints and fixes files
yarn lint
ποΈ Similar Repos
- vuep - π‘ A component for rendering Vue components with live editor and preview.
- codepan - Like codepen and jsbin but works offline.
- demosify - Create a playground to show the demos of your projects.
π License
MIT @xiaoluoboding