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">
import HelloWorld from './components/HelloWorld.vue'
import FeatureCard from "@/components/FeatureCard.vue";
</script>
<template>
<div>
<a href="https://vite.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
<div class="mx-auto mt-6 max-w-6xl px-4">
<h1 class="h1">ShadCN Vue template</h1>
<div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
<FeatureCard
title="Vue"
overview="JavaScript framework"
url="https://vuejs.org"
description="Integrates HTML, CSS and JS in simple templates."
/>
<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>
<style scoped>
.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>
<style scoped></style>