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:

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

Here's an example of a react version for comparison

A list of themes to customize your Sandpack components.

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

<Sandpack theme={githubLight} />;

This project removes [devtools component && useSandpackLint hook]

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

app.use(SanpackPlugin());

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

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' }}>

npm i

npm run storybook

import { defineNuxtConfig } from 'nuxt';

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

npx browserslist