wycats / sandpack-vue3

Vue3 components that give you the power of editable sandboxes that run in the browser.

Sandpack Vue3

Vue3 components that give you the power of editable sandboxes that run in the browser.

import { Sandpack } from 'codesandbox-sandpack-vue3';

<Sandpack template="vue3" />;

Read more

online demo

demo

ssg demo

Here's an example of a react version for comparison

https://stackblitz.com/edit/vitejs-vite-axyaxx

releases

https://github.com/jerrywu001/sandpack-vue3/releases

Sandpack Themes

A list of themes to customize your Sandpack components.

import { githubLight } from "@codesandbox/sandpack-themes";

<Sandpack theme={githubLight} />;

Read more

Documentation

For full documentation, visit https://sandpack.codesandbox.io/docs/

This project removes [devtools component && useSandpackLint hook]

SSG/SSR

Use vitepress/quasar

Register Components Globally

// main.ts
import SanpackPlugin from 'codesandbox-sandpack-vue3';

app.use(SanpackPlugin());

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "codesandbox-sandpack-vue3/global"
    ]
  }
}

registe components

• Sandpack
• SandpackLayout
• SandpackConsole
• SandpackTests
• CodeEditor
• SandpackProvider
• ErrorOverlay
• LoadingOverlay
• SandpackCodeEditor
• SandpackCodeViewer
• SandpackPreview
• SandpackStack
• SandpackTranspiledCode
• SandpackFileExplorer

Tips ☕

When using vue, please do not write it that way, It will not take effect

// 💀
<div style={{ height: 200 }}>

👉🏽Write it like this

<div style={{ height: '200px' }}>

install

npm i

npm run storybook

for nuxt3

• nuxt.config.ts

import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  vite: {
    define: {
      'process.env.LOG': {},
    },
  },
});

Supported browsers

npx browserslist