This is a demonstration of running a fork of the Vue SFC Sandbox with your own design system.

This approach requires publishing your design system as a public npm package.

In this demonstration, our design system is the package sample-vue-library maintained here: https://github.com/dwjohnston/sample-vue-library See that repository for an outline of how to create a vue package.

If you need an approach that doesn't require publishing your design system publically, see this: https://github.com/dwjohnston/vue-repl/tree/approach-b

How it works

1. We declare sample-vue-library as a dependency. link
2. We re-export everything from the library in a simple barrel file: link
3. We reference this barrel file in the import maps: link

At this point you should be able to use your component, but the CSS won't work.

The Playground does some kind of magic where it goes off to jsdelivr to fetch the typings - this is why your package needs to be published publically.

4. Update the preview template to have this css be inlined style tag.

https://github.com/dwjohnston/vue-repl/commit/6c68ec1b6f228c5ad1aa95545a1d95dc693bd7e3

5. Update your template for ease of use

https://github.com/dwjohnston/vue-repl/commit/83a272ff28e62066595b32957517d4f85037f169

That's it! All the best!