Developing New Components

To develop a new component you need to do 3 things: create and export your component, import your component into VitePress and create a page for your components documentation.

Exporting your component

• Create a .vue file in ~/components/. Ex: /components/my-component/my-component.vue
• Import your component into ~/index.ts. Ex import CiMyComponent from './components/my-component/my-component.vue';
• Add your component to the export. Ex: export { ..., CiMyComponent }

Import your component into VitePress

• Import your component into ~/docs/.vitepress/theme/index.ts. Ex: import { ..., CiMyComponent } from '@ci/stratus-components'
• Tell VitePress to use your component. Ex: app.component('CiMyComponent', CiMyComponent)

Create a page in the docs

• Add a new folder called my-component in the docs/components folder.
• Create index.md file in this folder.
• Add route to this component's documentation in ~/docs/.vitepress/theme/config.ts. Ex: { text: 'My Component', link: '/components/my-component' }

You can now locally develop your component by adding code to that markdown file.

Adding demos

• Create a my-component-feature-demo.vue file in the my-component folder.
• Import it at the start of the my-component/index.md file. Ex: <script setup> import myComponentFeatureDemo from './my-component-feature-demo.vue' </script>
• Insert it into text the following way:

<my-component-feature-demo />
<<< ./my-component-feature-demo.vue

If built in vp classes are overriding component classes, wrap the demo in <div class="vp-raw">.

See changes

To see changes to the design system components inside your demo run npm run build to rebuild the components. Changes to the markdown will be watched automatically by VitePress