Vue SFC Sandbox

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