vue-snippet-toggler

We wanted to have a nice way to show various snippets of code inside of our docs, so we figured we'd open source that component as well!

Installation

npm install @directus/vue-snippet-toggler

Usage

1<script setup>
2import { ref } from 'vue';
3
4import { SnippetToggler } from '@directus/vue-snippet-toggler';
5import '@directus/vue-snippet-toggler/style.css';
6
7const pref = ref('REST');
8</script>
9
10<template>
11	<SnippetToggler
12		v-model="pref"
13		:choices="['REST', 'GraphQL']"
14		label="API"
15	>
16		<template #rest>
17			<!-- Your REST example -->
18		</template>
19
20		<template #graphql>
21			<!-- Your REST example -->
22		</template>
23	</SnippetToggler>
24</template>

Contributing

This component was made for internal use, so it may or may not be flexible (enough) for your project. Contributions are more than welcome! Make sure to open an issue first outlining the change you'd like to make.

Cutting Releases

To push a new version of the library, run pnpm version <minor | patch> to update the version number and create the tag, and push both changes to GitHub with git push and git push --tags.

License

MIT