vue-components.pdf

Babel Coder
COMPONENTS
<script setup lang="ts">
const { data: articles } = useFetch('/api/articles')
</script>
<template>
<h1>Article List</h1>
<table>
<thead>
<tr>
<td>ID</td>
<td>Title</td>
<td>Excerpt</td>
</tr>
</thead>
<tbody>
<tr v-for="article of articles" :key="article.id" @click="console.log(article.id)">
<td>{{ article.id }}</td>
<td>{{ article.title }}</td>
<td>{{ article.excerpt }}</td>
</tr>
</tbody>
</table>
</template>

Babel Coder
COMPONENTS
</script>
<template>
<ArticleList :articles="articles" />
</template>
interface Article {
id: number
title: string
excerpt: string
}
const { articles } = de
fi
neProps<{ articles: Article[] | null }>()
</script>
<template>
<h1>Article List</h1>
<table>
<thead>
<tr>
<td>ID</td>
<td>Title</td>
<td>Excerpt</td>
</tr>
</thead>
<tbody>
<tr v-for="article of articles" :key="article.id" @click="console.log(article.id)">
<td>{{ article.id }}</td>
<td>{{ article.title }}</td>
<td>{{ article.excerpt }}</td>
</tr>
</tbody>
</table>
</template> components/article/ArticleList.vue

Babel Coder
COMPONENTS
import type { Column } from '~/components/ui/UiDataTable.vue'
import type { ArticleItem } from '~/server/api/articles.get'
const columns: Column<ArticleItem>[] = [
{ name: 'ID',
fi
eld: 'id' },
{ name: 'Title',
fi
eld: 'title' },
{ name: 'Excerpt',
fi
eld: 'excerpt' },
]
</script>
<template>
<UiDataTable title="Article List" :columns="columns" :rows="articles" />
</template>

Babel Coder
COMPONENTS
<script setup lang="ts" generic="T extends { id: number }">
export interface Column<Row> {
name: string
fi
eld: keyof Row
}
interface Props {
title: string
columns: Column<T>[]
rows: T[] | null
}
const { title, columns, rows } = de
fi
neProps<Props>()
</script>
<template>
<h1>{{ title }}</h1>
<table>
<thead>
<tr>
<td v-for="column of columns" :key="column.
fi
eld">
{{ column.name }}
</td>
</tr>
</thead>
<tbody>
<tr v-for="row of rows" :key="row.id" @click="console.log(row.id)">
fi
eld">
{{ row[column.
fi
eld] }}
</td>
</tr>
</tbody>
</table>
</template>
components/ui/UiDataTable.vue

Babel Coder
DEFAULT VALUES
{ name: 'ID',
fi
eld: 'id' },
{ name: 'Title',
fi
eld: 'title' },
{ name: 'Excerpt',
fi
eld: 'excerpt' },
]
</script>
<template>
<UiDataTable :columns="columns" />
</template>

Babel Coder
DEFAULT VALUES
name: string
fi
eld: keyof Row
}
interface Props {
title?: string
rows?: T[] | null
}
const { title, columns, rows } = withDefaults(de
fi
neProps<Props>(), {
title: 'Data Table',
rows: () => [],
})
</script>
<template>
<h1>{{ title }}</h1>
<div v-if="rows?.length === 0">
No data found
</div>
<table v-else>
<thead>
<tr>
fi
eld">
{{ column.name }}
</td>
</tr>
</thead>
<tbody>
<tr v-for="row of rows" :key="row.id" @click="console.log(row.id)">
fi
eld">
{{ row[column.
fi
eld] }}
</td>
</tr>
</tbody>
</table>
</template>

Babel Coder
EMIT
{ name: 'ID',
fi
eld: 'id' },
{ name: 'Title',
fi
eld: 'title' },
{ name: 'Excerpt',
fi
eld: 'excerpt' },
]
</script>
<template>
<UiDataTable
title="Article List"
:columns="columns"
:rows="articles"
@change="console.log($event)"
/>
</template>

Babel Coder
EMIT
name: string
fi
eld: keyof Row
}
interface Props {
title?: string
rows?: T[] | null
}
const { title, columns, rows } = withDefaults(de
fi
neProps<Props>(), {
title: 'Data Table',
rows: () => [],
})
const emit = de
fi
neEmits<{
(e: 'change', id: number): void
}>()
</script>
<template>
<h1>{{ title }}</h1>
<div v-if="rows?.length === 0">
No data found
</div>
<table v-else>
<thead>
<tr>
fi
eld">
{{ column.name }}
</td>
</tr>
</thead>
<tbody>
<tr v-for="row of rows" :key="row.id" @click="emit('change', row.id)">
fi
eld">
{{ row[column.
fi
eld] }}
</td>
</tr>
</tbody>
</table>
</template>

Babel Coder
SLOT
</script>
<template>
<header>Header</header>
<p>Content</p>
<footer>Footer</footer>
</template>
</script>
<template>
<UiCard />
</template>
components/ui/UiCard.vue

Babel Coder
DEFAULT SLOT
</script>
<template>
<header>Header</header>
<p><slot /></p>
<footer>Footer</footer>
</template>
</script>
<template>
<UiCard>My Content</UiCard>
</template>

Babel Coder
NAMED SLOT
</script>
<template>
<header><slot name="header" /></header>
<p><slot /></p>
<footer><slot name="footer" /></footer>
</template>
</script>
<template>
<UiCard>
<template #header>
My Header
</template>
<template #default>
My Content
</template>
<template #footer>
My Footer
</template>
</UiCard>
</template>
My Content

Babel Coder
FALLBACK CONTENT
</script>
<template>
<header>
<slot name="header">
Header
</slot>
</header>
<p><slot>Content</slot></p>
<footer>
<slot name="header">
Footer
</slot>
</footer>
</template>
</script>
<template>
<UiCard>
<template #header>
My Header
</template>
My Content
<template #footer>
My Footer
</template>
</UiCard>
</template>

vue-components.pdf

More Related Content

Similar to vue-components.pdf (20)

More from NuttavutThongjor1 (20)

Recently uploaded (20)

vue-components.pdf