Skip to content

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

License

Notifications You must be signed in to change notification settings

jerrywu001/sandpack-vue3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

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

Sponsor

Special Sponsor

special sponsor appwrite

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published