Creating a new component #

This guide will help you add a new component to the documentation.

Source code #

The source code of the component should be located in the src/components folder, and its name should start with Panda. As an example, we will create a new component called PandaTest.

First, create a new folder called PandaTest in src/components.

Then, create a new file called PandaTest.vue in the src/components/PandaTest folder. This will be the source code of the component.

If needed, create a src/components/PandaTest/types.ts file to store the typing of the models used in the component.

Once the source code is ready, create an index.ts file in the src/components/PandaTest folder. This file will be used to export the component.

import type { App, Plugin } from 'vue';
import PandaTest from './PandaTest.vue';

export default {
	install(app: App) {
		app.component(PandaTest.name, PandaTest);
	}
} as Plugin;

export {
	PandaTest
};

Create then a test file for unit testing the component in src/components/PandaTest/PandaTest.spec.ts and add the tests for this specific component.

When finished, add the component to the src/components/index.ts file.

//...
export * from './PandaTest';

Documentation #

When you finish creating the component, you need to add it to the documentation.

Be sure to create, at least, the following sections in the documentation:

• Basic usage
• Implementation details: (include here particularities in the component code)
• Value binding: (only if the components uses v-model in any way)
• Props: (only if the component has props. Take into account that modelValue-like props go to the Value binding section)
• Emits: (only if the component emits any event)
• Slots: (only if the component has any slot)
• CSS variables: (only if the components uses CSS variables that can be customized from outside)