Malasaur/ShadCN-Vue-Template
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tweaked default layout

Browse source
This commit is contained in:
Malasaur 2026-02-02 23:12:04 +01:00
parent 3118e4e1a5
commit 33bd7995ee
No known key found for this signature in database
3 changed files with 66 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/App.vue
View file

@ -1,30 +1,37 @@
<script setup lang="ts"> <script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue' import FeatureCard from "@/components/FeatureCard.vue";
</script> </script>
<template> <template>
<div> <div class="mx-auto mt-6 max-w-6xl px-4">
<a href="https://vite.dev" target="_blank"> <h1 class="h1">ShadCN Vue template</h1>
<img src="/vite.svg" class="logo" alt="Vite logo" /> <div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
</a> <FeatureCard
<a href="https://vuejs.org/" target="_blank"> title="Vue"
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /> overview="JavaScript framework"
</a> url="https://vuejs.org"
</div> description="Integrates HTML, CSS and JS in simple templates."
<HelloWorld msg="Vite + Vue" /> />
<FeatureCard
title="Vite"
overview="Build tool"
url="https://vite.dev"
description="Turns your Vue code into plain HTML."
/>
<FeatureCard
title="Tailwind"
overview="CSS framework"
url="https://tailwindcss.com"
description="Lets you style your site directly in the HTML through CSS classes."
/>
<FeatureCard
title="ShadCN"
overview="Component library"
url="https://shadcn-vue.com"
description="Provides ready to use, already styled components."
/>
</div>
</div>
</template> </template>
<style scoped> <style scoped></style>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

1
src/assets/vue.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
Side by side

Before

Width:  |  Height:  |  Size: 496 B

35
src/components/FeatureCard.vue Normal file
View file

@ -0,0 +1,35 @@
<script setup lang="ts">
import {
Card,
CardAction,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
defineProps<{
title: string;
overview: string;
url: string;
description: string;
}>();
</script>
<template>
<Card>
<CardHeader>
<CardTitle>{{ title }}</CardTitle>
<CardDescription>{{ overview }}</CardDescription>
<CardAction>
<a :href="url"
><Button variant="outline">Documentation</Button></a
>
</CardAction>
</CardHeader>
<CardContent>
<p class="p">{{ description }}</p>
</CardContent>
</Card>
</template>