Vue Components

up:: Vue

• Vue Slots
• Vue Dynamic Components
• Vue teleport

const app = Vue.createApp({
 
});
 
app.createComponent('my-component', {
	template: `<ul>…</ul>`,
});

Components are essentially just ‘mini-apps’. You can have all the goodness of Vue Methods, Vue Data Binding and so on.

Naming convention: multi-words. At least two words, separated by a hyphen.

Global components

1. Create a file in components/
2. app.component('kebab-name', 'ImportName') in main.js
3. Use component wherever

Local components

<script>
import TheHeader from './components/TheHeader.vue';
export default {
	components: {
		'the-header': TheHeader, // or:
		// TheHeader,
	}
}
</script>

Both PascalCase and kebab-case work for imports. With PascalCase, you can use self-closing tags (<PascalCase />).