sandpack-vue3

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

MIT 35 个版本

vue3 sandpack sandpack-vue sandpack-vue3 sandpack-react @codesandbox @codesandbox/sandpack-vue @codesandbox/sandpack-vue3 codesandbox

主页

仓库

提交 Issue

安装

npm install sandpack-vue3

yarn add sandpack-vue3

pnpm add sandpack-vue3

bun add sandpack-vue3

README

Component toolkit for live running code editing experiences

Sandpack Vue3

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

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

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} />;

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

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

Special Sponsor

版本列表

3.1.12 2024-09-30

3.1.11 2024-01-25

3.1.10 2024-01-24

3.1.9 2023-10-08

3.1.8 2023-10-06

3.1.7 2023-09-12

3.1.6 2023-08-09

3.1.5 2023-05-28

3.1.4 2023-05-15

3.1.3 2023-05-04

3.1.2 2023-04-23

3.1.1 2023-04-18

3.1.0 2023-04-13

3.0.7 2023-04-11

3.0.6-beta.1 2023-03-16

3.0.6-beta.0 2023-03-16

3.0.6 2023-03-21

3.0.5 2023-03-16

3.0.4 2023-03-16

3.0.3 2023-03-15

3.0.2 2023-03-14

3.0.1 2023-03-13

3.0.0 2023-03-06

2.2.3 2023-02-02

2.2.2 2023-01-31

2.2.1 2023-01-30

2.2.0 2023-01-30

2.1.0 2023-01-16

2.0.6 2022-12-21

2.0.5 2022-12-16

2.0.4 2022-12-14

2.0.3 2022-12-13

2.0.2 2022-12-12

2.0.1 2022-12-01

2.0.0 2022-11-22