https://github.com/valantic/vue-styleguide
https://github.com/valantic/vue-styleguide
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/valantic/vue-styleguide
- Owner: valantic
- License: mit
- Created: 2025-02-28T14:22:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-02-28T21:47:43.000Z (4 months ago)
- Last Synced: 2026-03-01T00:46:35.807Z (4 months ago)
- Language: Vue
- Size: 1.01 MB
- Stars: 1
- Watchers: 5
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# valantic - vue styleguide
> A pluggable Developer Experience (DX) utility for Vue 3 projects.
This library provides a standardized, interactive sidebar designed to be integrated into any Vue 3 project during development. It acts as a "testing harness," allowing developers to quickly navigate test/demo pages and manipulate global application states (like themes and languages) through a unified interface.
#### Config sidebar `c-vas-sidebar`
- Searchable menu for all test pages
- Config section to change eg. the language or theme
#### Config sidebar `l-vas-layout`
- Demo wrapper for pages and components.
Roadmap:
- Better documentation.
- More config possibilities for a certain feature or page.
- Slots in `l-vas-layout` for common used things like documentation link or description.
## Introduction
### How to use:
This lib is part of the [vue-template](https://github.com/valantic/vue-template) project. Check this page for a more complex usage.
#### Install via npm
To reduce dev overhead it is currently only installable by a github link. Add this to your package.json
in this example the version 0.0.2 used. Find available versions here: [https://github.com/valantic/vue-styleguide/tags](https://github.com/valantic/vue-styleguide/tags)
```
"devDependencies": {
"@valantic/vue-styleguide": "github:valantic/vue-styleguide#v1.0.0",
}
```
#### Include it in the test section of your project:
See [https://github.com/valantic/vue-template/blob/main/src/styleguide/styleguide.vue](https://github.com/valantic/vue-template/blob/main/src/styleguide/styleguide.vue)
Include the sidebar in your project.
```vue3
import { cVasSidebar, useVasSettingsStore, VasSettingsStore } from '@valantic/vue-styleguide';
import { StyleguideConfiguration } from '@valantic/vue-styleguide/types';
import { defineComponent } from 'vue';
type Setup = {
vasSettingsStore: VasSettingsStore;
};
type Data = {
styleguideConfig: Partial<StyleguideConfiguration>;
};
export default defineComponent({
name: 'app',
components: {
cVasSidebar,
},
computed: {
styleguideConfig: {
options: {
themes: [
{
label: 'theme-01',
value: 'theme-01',
},
{
label: 'theme-02',
value: 'theme-02',
},
],
languages: [
{
label: 'English',
value: 'en',
},
{
label: 'Deutsch',
value: 'de',
},
],
},
settings: {
isLoggedIn: false,
activeLanguage: 'en',
activeTheme: 'theme-02',
},
},
},
watch: {
'vasSettingsStore.config.settings': {
handler(newSettings) {
// eslint-disable-next-line no-console
console.log('settings have changed', newSettings);
},
deep: true,
immediate: false,
},
},
});
```
## Predefined demo pages
### Readme
Import a default demo page to display the projects README.md file.
In your `styleguide/setup/routes.ts` you can add:
```ts
import { styleguideRouterConfig, styleguideTestPages } from '@valantic/vue-styleguide';
export default [
{
path: styleguideRouterConfig.rootPath,
name: 'sg-root',
component: styleguideRouterConfig.routeChildrenComponentWrapper,
redirect: `${styleguideRouterConfig.rootPath}/${styleguideTestPages.readme.path}`,
meta: {
title: 'Styleguide',
},
children: [styleguideTestPages.readme],
},
]
```
## License
[MIT](https://opensource.org/licenses/MIT)
Copyright (c) 2017-present, valantic CEC Schweiz AG