3.1.12 ā€¢ Published 3 months ago

sandpack-vue3 v3.1.12

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

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