What is the process for building a reusable component from a static component in Vue 3?

Question

What is the process for building a reusable component from a static component in Vue 3?

I am delving into Vue 3 and Headless UI, and I have successfully created a ListBox component in App.vue to display a list of People which is functioning as expected. Now, I am aiming to transform it into a reusable component capable of displaying lists of both People and Countries.

How can I make my component dynamic to accommodate both types of lists?

ListBox.vue

<template>

    <Listbox v-model="selectedPerson">

        <ListboxButton class=" bg-white shadow-sm border-gray-500 border-2 shadow-gray-200 font-bold p-4 text-left rounded-md">
            {{ selectedPerson.name }}
        </ListboxButton>

        <ListboxOptions class="mt-2">

            <ListboxOption
                as="template" v-slot="{ active }"
                v-for="person in people" :key="person"
                :value="person">
                <li :class="{
                    'bg-blue-500 text-white p-6': active,
                    'bg-white shadow-lg p-6 text-black ': !active
                }">
                    {{ person.name }}
                </li>
            </ListboxOption>

        </ListboxOptions>

    </Listbox>

</template>

<script setup>
    import { ref } from 'vue'
    import {
        Listbox,
        ListboxLabel,
        ListboxButton,
        ListboxOptions,
        ListboxOption,
    } from '@headlessui/vue'

    const people = [
        { id: 1, name: 'Durward Reynolds' },
        { id: 2, name: 'Kenton Towne' },
        { id: 3, name: 'Therese Wunsch' },
        { id: 4, name: 'Benedict Kessler' },
        { id: 5, name: 'Katelyn Rohan' },
    ]
    const selectedPerson = ref(people[0])
</script>

App.vue:

<template>
    <ListBox />
</template>

javascript vue.js vue-component vuejs3 headless-ui

Answer 1

Answer №1

To incorporate the display of a list of items along with the currently selected item or index, make sure to pass them as props to the component.
Below is an example, written quickly and not tested, but it should guide you on what to attempt and how to move forward.

It is advisable to rename the component to prevent confusion with the Listbox component from Headless UI.

App.vue

<template>
   <ItemList :items='people' :selected-index='0' />
   <ItemList :items='countries' :selected-index='0' />
</template>

<script>
const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
]
const countries = [
    { id: 1, name: 'Italy' },
    { id: 2, name: 'Switzerland' },
    { id: 3, name: 'Austria' },
    { id: 4, name: 'Germany' },
]
</script>

ItemList.vue

<template>
    <Listbox v-model="selectedItem">
        <ListboxButton class=" bg-white shadow-sm border-gray-500 border-2 shadow-gray-200 font-bold p-4 text-left rounded-md">
            {{ selectedItem.name }}
        </ListboxButton>

        <ListboxOptions class="mt-2">
            <ListboxOption
                as="template" v-slot="{ active }"
                v-for="item in items" :key="item.id"
                :value="item">
                <li :class="{
                    'bg-blue-500 text-white p-6': active,
                    'bg-white shadow-lg p-6 text-black ': !active
                }">
                    {{ item.name }}
                </li>
            </ListboxOption>
        </ListboxOptions>
    </Listbox>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
    Listbox,
    ListboxLabel,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
} from '@headlessui/vue'

const props = defineProps({
    items: Array,
    selectedIndex: Number,
})

const selectedItem = ref(null)

onMounted(() => {
    if(items && selectedIndex >= 0 && selectedIndex < items.length) {
        selectedItem.value = items[selectedIndex]
    }
})
</script>

Answer 2

To incorporate the display of a list of items along with the currently selected item or index, make sure to pass them as props to the component.
Below is an example, written quickly and not tested, but it should guide you on what to attempt and how to move forward.

It is advisable to rename the component to prevent confusion with the Listbox component from Headless UI.

App.vue

<template>
   <ItemList :items='people' :selected-index='0' />
   <ItemList :items='countries' :selected-index='0' />
</template>

<script>
const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
]
const countries = [
    { id: 1, name: 'Italy' },
    { id: 2, name: 'Switzerland' },
    { id: 3, name: 'Austria' },
    { id: 4, name: 'Germany' },
]
</script>

ItemList.vue

<template>
    <Listbox v-model="selectedItem">
        <ListboxButton class=" bg-white shadow-sm border-gray-500 border-2 shadow-gray-200 font-bold p-4 text-left rounded-md">
            {{ selectedItem.name }}
        </ListboxButton>

        <ListboxOptions class="mt-2">
            <ListboxOption
                as="template" v-slot="{ active }"
                v-for="item in items" :key="item.id"
                :value="item">
                <li :class="{
                    'bg-blue-500 text-white p-6': active,
                    'bg-white shadow-lg p-6 text-black ': !active
                }">
                    {{ item.name }}
                </li>
            </ListboxOption>
        </ListboxOptions>
    </Listbox>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
    Listbox,
    ListboxLabel,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
} from '@headlessui/vue'

const props = defineProps({
    items: Array,
    selectedIndex: Number,
})

const selectedItem = ref(null)

onMounted(() => {
    if(items && selectedIndex >= 0 && selectedIndex < items.length) {
        selectedItem.value = items[selectedIndex]
    }
})
</script>

Answer 3

Answer №2

It's so close to what you want, all you need is the use of props.
Your people and countries are instances of a child component called DataTable.vue, and you want to utilize them in a parent component called App.vue.

Here is the structure of DataTable.vue :

<template>
 <div id='data-table'> 
   {{table}}
 </div>
</template>
 
<script>
export default {
  .
  .
  .
 props: ['table']
}
</script>

As for the structure of App.vue:

<template>
   <data-table table='people' />
   <data-table table='countries' />
</template>

Additionally, you should define the tables outside of the child component and then pass them to the child. The recommended approach for this is to utilize state management, such as vuex.

Answer 4

It's so close to what you want, all you need is the use of props.
Your people and countries are instances of a child component called DataTable.vue, and you want to utilize them in a parent component called App.vue.

Here is the structure of DataTable.vue :

<template>
 <div id='data-table'> 
   {{table}}
 </div>
</template>
 
<script>
export default {
  .
  .
  .
 props: ['table']
}
</script>

As for the structure of App.vue:

<template>
   <data-table table='people' />
   <data-table table='countries' />
</template>

Additionally, you should define the tables outside of the child component and then pass them to the child. The recommended approach for this is to utilize state management, such as vuex.

What is the process for building a reusable component from a static component in Vue 3?

Answer №1

Answer №2

Similar questions

The error message "The export named 'render' (which was imported as 'render') could not be found" appeared

What are the reasons behind the absence of CORS issue on the backend server?

What is the best way to display the complete text or wrap a menu item in an Angular Material menu?

React component closes onBlur event when clicked inside

Organizing DIVs upon website initialization

When using v-for to render components and <selection>, is there a way to customize it for just one specific instance of the component?

The v-validate feature in Vue.js seems to be encountering issues when used in conjunction with

Tips on building a blog using solely index.html, style.css, and script.js files

Require assistance with try-catch statements

Why is my JSON object showing up as undefined in my Node.js POST request?

Is there a way to manipulate the src value using jQuery or JavaScript?

Exploring ways to retrieve global variables within a required() file in Node.js

Is it not recommended to trigger the 'focusout' event before the anchor element triggers the 'click' event?

Issue arising during reconnection following a disconnection in the node-redis client

MUI's lazy loading feature can interfere with the functionality of useEffect

Bypass VueJs Typescript errors within the template section with Typescript

I seem to be struggling with hiding/showing a div element. Can you figure

Update the numerical data within a td element using jQuery

Cannot find the appended element in an AJAX call using jQuery

What is the best way to modify a node_module file consisting of only a few exported variables, which is heavily utilized in the entire module? (with demonstration)