vss
vue-sfc-sandbox
npm i vue-sfc-sandbox
vss

vue-sfc-sandbox

Vue SFC Sandbox, Sandbox as a Vue 3 component.

by Yunwei Xiao

0.2.1 (see all)License:MITTypeScript:Built-In
npm i vue-sfc-sandbox
Readme

Vue SFC Sandbox

Vue SFC Sandbox, Sandbox as a Vue 3 component.


NPM NPM Download License

🖼️ Preview

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

AttributeDescriptionTypeAccepted valuesDefault
heightthe sandbox height unit (px)Number-400
import-mapsspecify a import maps in the <script> element include type=\"importmap\"String--
externalsspecify some cdn like jsdelivr、unpkgString--
sfc-filenamevirtual sfc filename like HelloWorld.vue--
sfc-codetranspile sfc code to es modules by vue-sfc2esmString--
script-setupwhether script editor using <script setup> proposalBooleantrue/falsefalse

💻 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

Downloads/wk

21

GitHub Stars

23

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
0.2.1
latest
1yr ago
No alternatives found
No tutorials found
Add a tutorial