Use snippets

setup

• create a folder, for example: snippets
• create your file snippets

Floders are:

basic

::: sandbox {entry=/main.js}
<<< @/snippets/App.vue{#active}

<<< @/snippets/main.js
:::

::: sandbox
<<< @/snippets/App.vue{prefix=/src/}

<<< @/snippets/main.js{prefix=/src/}
:::

prefix default to /

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

active by file

For example, active the /src/main.js

::: sandbox
<<< @/snippets/App.vue{prefix=/src/}

<<< @/snippets/main.js{prefix=#active/src/}
:::

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

readOnly by file

For example, active the /src/main.js

::: sandbox
<<< @/snippets/App.vue{prefix=#readOnly/src/}

<<< @/snippets/main.js{prefix=/src/}
:::

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

active & readOnly by file

For example, active the /src/main.js

::: sandbox
<<< @/snippets/App.vue{prefix=/src/}

<<< @/snippets/main.js{prefix=#active#readOnly/src/}
:::

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

hidde some file

::: sandbox {template=react}
<<< @/snippets/App.js{#hidden}

```js /Clock.js [active]
export default function Clock({ color, time }) {
  return (
    <h1 style={{ color: color }}>
      {time}
    </h1>
  );
}
```
:::

export default function App() {
  return <h1>Hello world</h1>
}

Open Sandbox