Vue Components

up:: Vue

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

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

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