# Using components

Components aren’t registered automatically to take advantage of bundler’s tree-shaking (opens new window) optimizations by default.

You need to register Chūshō’s components you want to use either globally, for example in your main entry point:






 
 

import { createApp } from 'vue';
import { CBtn, CIcon } from 'chusho';

const app = createApp(App);

app.component('CBtn', CBtn);
app.component('CIcon', CIcon);

Or locally in the components they are used:











 





 
 
 






<template>
    <CCollapse>
        <CCollapseBtn>...</CCollapseBtn>
        <CCollapseContent>
            <!-- ... -->
        </CCollapseContent>
    </CCollapse>
</template>

<script>
import { CCollapse, CCollapseBtn, CCollapseContent } from 'chusho';

export default {
    name: 'MyComponent',

    components: {
        CCollapse,
        CCollapseBtn,
        CCollapseContent,
    },

    // ...
};
</script>
Last updated: 12/2/2020, 12:50:55 PM