Vue 3 component eco system

Check out Github repo for a boiler plate that contains Vue3 Typescript, Vite, Tailwind and Jest which contains examples of the different component listed below.

https://github.com/wadizaatour/Vue3Tailwind

Using Components

Values in the scope of <script setup> can also be used directly as custom component tag names:

<script setup>
import MyComponent from './MyComponent.vue'
</script>
<template>
  <MyComponent />
</template>

Think of MyComponent as being referenced as a variable. If you have used JSX, the mental model is similar here. The kebab-case equivalent <my-component> also works in the template - however PascalCase component tags are strongly recommended for consistency. It also helps differentiating from native custom elements.

Dynamic Components

Since components are referenced as variables instead of registered under string keys, we should use dynamic :is binding when using dynamic components inside <script setup>:

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>
<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

Note how the components can be used as variables in a ternary expression.

Recursive Components

An SFC can implicitly refer to itself via its filename. E.g. a file named FooBar.vue can refer to itself as in its template.

Note this has lower priority than imported components. If you have a named import that conflicts with the component’s inferred name, you can alias the import:

import { FooBar as FooBarChild } from './components'

Namespaced Components

You can use component tags with dots like to refer to components nested under object properties. This is useful when you import multiple components from a single file:

<script setup>
import * as Form from './form-components'
</script>
<template>
  <Form.Input>
    <Form.Label>label</Form.Label>
  </Form.Input>
</template>

Lazy load Components

In <script setup> you can simply lazy load components:

<script setup>
import { defineAsyncComponent } from 'vue'
const MyComponent = defineAsyncComponent(() => import(./MyComponent.vue))
</script>
<template>
  <MyComponent />
</template>