This is a VUE Kanban board component that you can use in your projects.

Use

in your .vue file import the component

<scrip>
import { KanBoard, KanColumn } from 'kanban-board-dl';

export default {
    name: 'my-app',
    components: {
        KanBoard,
        KanColumn,
    },
};
</script>

in the template section:

    <KanBoard
			class="board"
			task-page-name="kan-task-detail"
			:columns="columns"
			@update-columns="updateColumns"
		>
			<template v-slot:column="{ column, indexColumn }">
				<KanColumn
					class="column"
					column-title="name"
					:column="column"
					:columns="columns"
					:index-column="indexColumn"
					:default-task="{}"
					@new-task="updateTasks"
					@update-tasks="updateTasks"
					@update-column-name="updateColumnName"
					@show-task="showTask"
				>
					<template v-slot:task="{ task }">
                        <button
                            type="button"
							class="task hover:shadow-lg hover:scale-105"
							@click="showTask(task)"
						>
							{{task.name}}
						</button>
					</template>
				</KanColumn>
			</template>
		</KanBoard>

in the style section (lang="scss")

.board {
	.board-container {
		@apply flex overflow-x-auto h-full;

		.column-item {
			height: max-content;
			min-width: 31rem;
			@apply bg-gray-300 p-6 mx-4 text-left rounded-lg text-3xl;
		}
	}

	.modal-task-container {
		background-color: #2d3748b3;
		@apply absolute top-0 left-0 w-screen h-screen z-10;
	}
}

.column {
	&.column-item-container {
		.add-task-input {
			font-family: Avenir, Helvetica, Arial, sans-serif;
			@apply w-full bg-transparent border-0 font-medium;
		}
	}
}

.task {
	transition: all 100ms ease-in-out;
	@apply bg-white p-4 rounded-lg my-4 text-xl transform scale-100;
}

.add-column-input {
	@apply  bg-blue-600 border-0 p-2 px-4 py-4 text-white rounded-lg mx-4;
}

.add-column-input::placeholder {
	@apply text-white;
}
.add-column-input:hover {
	filter: brightness(1.1);
}

KanBoard component

props:

item | prop | type | description ----:| ---: | -----:|----------: 1|columns|Array| Array of columns. Each column has tasks 2|task-page-name|string|You need a new route or page in your app for showing task's details. The new route's name goes in this prop. With this, the component can show and hide de task's details.

events:

item | event | args | description ----:| ---: | -----:|----------: 1|update-columns| columns | The component emits this event with the columns updated. This event can occurs when one task is created or is dragged and droped into another column or when you drag and drop a column.

slots:

item | name | props | description ----:| ---: | -----:|----------: 1|column|{ columns, indexColumn }| In this slot you have to put the KanColumn component

KanColum component

props:

item | prop | type | description ----:| ---: | -----:|----------: 1|columns|Array| Array of columns. Each column has tasks 2| column|Object| Each column in columns 3|index-column|number| Each column's index 4|default-task|Object| This object is used when the you need to create a new task 5|column-title|string|Prop to use for column's title 6|add-task-field|boolean|This prop is used to show or hide the add task field. Is true by default.

events:

item | event | args | description ----:| ---: | -----:|----------: 1|new-task| { tasks, indexColumn } | The component emit this event when the user create a new task. The arguments are the tasks updated (width the new task included) and indexColumn for update the column. 2|update-task| { tasks, indexColumn }| idem 3 |update-column-name| column, indexColumn| The component emits this event when the user changes the column's name. The arguments are column (updated) and indexColumn for update columns 4|show-task| task | The component emits this event when any task is clicked and is used for show task's details

slots:

item | name | props | description ----:| ---: | -----:|----------: 1|task|{ task }| This slot is for each task.