Developing New Components

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

Exporting your component

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

Import your component into VuePress

• Import your component into ~/docs/.vuepress/enhanceApp.js. Ex: import { ..., CiMyComponent }
• Tell VuePress to use your component. Ex: Vue.component('CiMyComponent', CiMyComponent)

Create a page in the docs

Add a new file called my-component.md in the docs/components folder and a route in the app will automatically be created for http://localhost:3000/components/my-component.

$ echo '# My Component' > docs/components/my-component.md

You can now locally develop your component by adding code to that markdown file. This will render as an inline-demo with both the live vue demo and a code sample below. You can modify this demo as needed and even give it a script & style section.

::: demo
```vue
<template>
  <div>My component</div>
</template>
` ` ` // remove the spaces between `s
:::

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 VuePress