Import and use a component

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

If you are familiar with Vue you don't need to read this chapter ๐Ÿ™Œ

Every time you want to use a Vue component, it needs to be imported first. So, for example, let's see how to import a component (a button component) into another component (a page component). Following code shows a page component๐Ÿ‘‡

// Page component, for example /src/views/Page.vue
โ€‹
<template>
<c-button>My button</c-button>
</template>
โ€‹
<script>
import CButton from '@/components/elements/Button.vue'
โ€‹
export default {
name: 'Page',
components: {
CButton
}
}
</script>

You can learn more about importing components on the Vue documentation.