83 lines
1.6 KiB
Markdown
83 lines
1.6 KiB
Markdown
---
|
|
title: Playground
|
|
icon: lucide:app-window
|
|
navBadges:
|
|
- value: New
|
|
type: lime
|
|
badges:
|
|
- value: Source
|
|
icon: lucide:code
|
|
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Playground.vue
|
|
target: _blank
|
|
---
|
|
|
|
## Usage
|
|
|
|
### Stackblitz
|
|
|
|
::stack
|
|
::div{class="p-4"}
|
|
::playground
|
|
---
|
|
provider: stackblitz
|
|
repo: nuxt/starter
|
|
branch: v3
|
|
file: app.vue
|
|
---
|
|
::
|
|
::
|
|
```mdc
|
|
::playground
|
|
---
|
|
provider: stackblitz
|
|
repo: nuxt/starter
|
|
branch: v3
|
|
file: app.vue
|
|
---
|
|
::
|
|
```
|
|
::
|
|
|
|
### CodeSandbox
|
|
|
|
::stack
|
|
::div{class="p-4"}
|
|
::playground
|
|
---
|
|
provider: codesandbox
|
|
repo: nuxt/starter
|
|
branch: v3
|
|
file: app.vue
|
|
---
|
|
::
|
|
::
|
|
```mdc
|
|
::playground
|
|
---
|
|
provider: codesandbox
|
|
repo: nuxt/starter
|
|
branch: v3
|
|
file: app.vue
|
|
---
|
|
::
|
|
```
|
|
::
|
|
|
|
## Props
|
|
|
|
::field-group
|
|
:field{name="provider" type="'stackblitz' | 'codesandbox'"}[Provider to use]
|
|
:field{name="repo" type="string"}[GitHub repository name (e.g. `nuxt/starter`)]
|
|
:field{name="branch" type="string" default-value="main"}[Branch name]
|
|
::field{name="id" type="string"}
|
|
Repository ID (e.g. for Stackblitz `github-t1vjvm`, for Codesandbox `8hq5qn`)
|
|
|
|
::alert{icon="lucide:info" type="info"}
|
|
You need to provide either `repo` or `id` prop, but not both.
|
|
::
|
|
::
|
|
:field{name="dir" type="string" default-value="''"}[Directory to open in the playground (optional)]
|
|
:field{name="file" type="string"}[File path to open]
|
|
:field{name="title" type="string" default-value="Playground"}[Title of the iframe]
|
|
::
|