6cad42dbac
- Solution with API, Application, Domain, Infrastructure projects - Clean Architecture project references configured - Vue 3 + Vuetify 3 + TypeScript frontend scaffolded Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
95 lines
2.8 KiB
Vue
95 lines
2.8 KiB
Vue
<template>
|
|
<v-container class="fill-height d-flex flex-column justify-center" max-width="1100">
|
|
<div>
|
|
<v-img
|
|
class="mb-4 font-weight-bold"
|
|
height="150"
|
|
src="@/assets/logo.png"
|
|
/>
|
|
|
|
<div class="mb-8 text-center">
|
|
<div class="text-body-medium font-weight-light mb-n1">Welcome to</div>
|
|
<div class="text-display-medium font-weight-bold">Vuetify</div>
|
|
</div>
|
|
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<v-card
|
|
class="py-4"
|
|
color="surface-variant"
|
|
image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
|
|
rounded="lg"
|
|
variant="tonal"
|
|
>
|
|
<template #prepend>
|
|
<v-avatar class="ml-2 mr-4" icon="mdi-rocket-launch-outline" size="60" variant="tonal" />
|
|
</template>
|
|
|
|
<template #image>
|
|
<v-img position="top right" />
|
|
</template>
|
|
|
|
<template #title>
|
|
<div class="my-title my-uppercase text-headline-medium font-weight-bold">Get started</div>
|
|
</template>
|
|
|
|
<template #subtitle>
|
|
<div class="text-body-large">
|
|
Change this page by updating <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>components/HelloWorld.vue</v-kbd>.
|
|
</div>
|
|
</template>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col v-for="link in links" :key="link.href" cols="6">
|
|
<v-card
|
|
append-icon="mdi-open-in-new"
|
|
class="py-4"
|
|
color="surface-variant"
|
|
:href="link.href"
|
|
rel="noopener noreferrer"
|
|
rounded="lg"
|
|
:subtitle="link.subtitle"
|
|
target="_blank"
|
|
:title="link.title"
|
|
variant="tonal"
|
|
>
|
|
<template #prepend>
|
|
<v-avatar class="ml-2 mr-4" :icon="link.icon" size="60" variant="tonal" />
|
|
</template>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const links = [
|
|
{
|
|
href: 'https://vuetifyjs.com/',
|
|
icon: 'mdi-text-box-outline',
|
|
subtitle: 'Learn about all things Vuetify in our documentation.',
|
|
title: 'Documentation',
|
|
},
|
|
{
|
|
href: 'https://vuetifyjs.com/introduction/why-vuetify/#feature-guides',
|
|
icon: 'mdi-star-circle-outline',
|
|
subtitle: 'Explore available framework Features.',
|
|
title: 'Features',
|
|
},
|
|
{
|
|
href: 'https://vuetifyjs.com/components/all',
|
|
icon: 'mdi-widgets-outline',
|
|
subtitle: 'Discover components in the API Explorer.',
|
|
title: 'Components',
|
|
},
|
|
{
|
|
href: 'https://discord.vuetifyjs.com',
|
|
icon: 'mdi-account-group-outline',
|
|
subtitle: 'Connect with Vuetify developers.',
|
|
title: 'Community',
|
|
},
|
|
]
|
|
</script>
|