Using multiple Vue components in one file

Question

In the vue documentation, I saw "Namespace Components" in the "Script Settings" guide, where it says:

You can use dotted component tags (such as ) to reference 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>

I would like to know what the form component looks like in this example, and what is the correct use case for such a component, and how does it relate to "slot".

Answer 1

In this case, form-components references a .js file that appears to be exporting a single file component (.vue) .

Form component.js

export { default as Label } from './form-label.vue'
export { default as Input } from './form-input.vue'

You can then access these components via:

import * as Form from './form-components'

However, I recommend using the destructuring assignment method since the IDE can explain it better.

import { Input, Label } from './form-components'