sandpack-vue3

Sandpack Vue3

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

TIPS: There have been some issues using volar@1.x about TS static type checking in a single vue file, see: https://github.com/johnsoncodehk/volar/issues/2206

import { Sandpack } from 'sandpack-vue3';

<Sandpack template="vue3" />;

Frome 3.0, we add some new templates:

Quickstart

node nextjs vite vite-react vite-react-ts vite-vue vite-vue-ts vite-svelte vite-svelte-ts vite-solid vite-lit astro

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 'sandpack-vue3';

app.use(SanpackPlugin());

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "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