Vue SFC Sandbox

Vue SFC Sandbox, 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 support attributify mode.

✏️ Editor Panel

• 🎨 Themeable Editor based on Monaco Editor
• 🧑‍💻 Developer Friendly, built-in Vue 3 intellisense support
• ↕️ 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 on Consolidate packages. We need configure Consolidate as externals in vue.config.js or vite.config.ts file.

Demos

Vue 3 Demo: Vue CLI 3.x | Vite 2 Demo: @vitejs/app

Configure Vue 3

Add this config in vue.config.js file.

// vue.config.js in vue 3 project
module.exports = {
  ...
  configureWebpack: {
    externals: {
      consolidate: 'Consolidate'
    }
  }
  ...
}

Configure Vite 2

Add this config in vite.config.ts file.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    'process.env': {}
  },
  plugins: [vue()],
  optimizeDeps: {
    exclude: ['consolidate', 'velocityjs', 'dustjs-linkedin', 'atpl', 'liquor', 'twig', 'ejs', 'eco', 'jazz', 'hamljs', 'hamlet', 'jqtpl', 'whiskers', 'haml-coffee', 'hogan.js', 'templayed', 'handlebars', 'underscore', 'lodash', 'walrus', 'mustache', 'just', 'ect', 'mote', 'toffee', 'dot', 'bracket-template', 'ractive', 'htmling', 'babel-core', 'plates', 'react-dom/server', 'react', 'vash', 'slm', 'marko', 'teacup/lib/express', 'coffee-script', 'squirrelly', 'twing']
  }
})

Setup SFC Sandbox Component

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

import VueSfcSandbox from 'vue-sfc-sandbox'

createApp(App)
  .use(VueSfcSandbox)
  .mount('#app')

Use SFC Sandbox Component

<template>
  <!-- [ESM] default case with <script setup> -->
  <sfc-sandbox v-bind="defaultAttrs" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',

  setup () {
    const defaultAttrs = {
      scriptSetup: true,
      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	true/false	false

💻 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