Skip to content

Commit 0cd2c5a

Browse files
benjamincanacbenjamincanac
committed
up
1 parent 26fd257 commit 0cd2c5a

File tree

7 files changed

+114
-77
lines changed

7 files changed

+114
-77
lines changed

‎README.md‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
1-
# Vue Starter Template
1+
# Nuxt UI Vue Starter Template
22

33
[![Nuxt UI](https://img.shields.io/badge/Made%20with-Nuxt%20UI-00DC82?logo=nuxt&labelColor=020420)](https://ui.nuxt.com)
44

5-
This Vue starter lets you get started with [Nuxt UI](https://ui.nuxt.com) quickly.
5+
Use this template to get started with [Nuxt UI](https://ui.nuxt.com) quickly in Vue.
66

7-
- [Live demo](https://ui-pro-starter-vue.nuxt.dev/)
7+
- [Live demo](https://starter-vue-template.nuxt.dev/)
88
- [Documentation](https://ui.nuxt.com/getting-started/installation/vue)
99

10+
<a href="https://starter-vue-template.nuxt.dev/" target="_blank">
11+
<picture>
12+
<source media="(prefers-color-scheme: dark)" srcset="https://ui4.nuxt.com/assets/templates/vue/starter-dark.png">
13+
<source media="(prefers-color-scheme: light)" srcset="https://ui4.nuxt.com/assets/templates/vue/starter-light.png">
14+
<img alt="Nuxt UI Starter Template" src="https://ui4.nuxt.com/assets/templates/vue/starter-light.png">
15+
</picture>
16+
</a>
17+
18+
## Quick Start
19+
20+
```bash [Terminal]
21+
npx giget@latest gh:nuxt-ui-templates/starter-vue my-vue-starter
22+
```
23+
1024
## Setup
1125

1226
Make sure to install the dependencies:

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<link rel="preconnect" href="https://fonts.bunny.net">
88
<link href="https://fonts.bunny.net/css?family=public-sans:400,500,600,700" rel="stylesheet" />
9-
<title>Vue Starter Template</title>
10-
<meta name="description" content="Nuxt UI is a free and open-source UI library for Nuxt applications. Create beautiful & responsive applications in minutes.">
9+
<title>Nuxt UI Vue Starter Template</title>
10+
<meta name="description" content="A production-ready starter template powered by Nuxt UI. Build beautiful, accessible, and performant applications in minutes, not hours.">
1111
</head>
1212
<body>
1313
<div id="app" class="isolate"></div>

‎src/App.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
<UHeader>
55
<template #left>
66
<RouterLink to="/">
7-
<UILogo class="w-auto h-6 shrink-0" />
7+
<AppLogo class="w-auto h-6 shrink-0" />
88
</RouterLink>
99
</template>
1010

1111
<template #right>
12-
<!-- <UColorModeButton /> -->
12+
<UColorModeButton />
1313

1414
<UButton
15-
to="https://github.com/nuxt-ui-pro/starter-vue"
15+
to="https://github.com/nuxt-ui-templates/starter-vue"
1616
target="_blank"
1717
icon="simple-icons:github"
1818
aria-label="GitHub"
@@ -37,7 +37,7 @@
3737

3838
<template #right>
3939
<UButton
40-
to="https://github.com/nuxt-ui-pro/starter-vue"
40+
to="https://github.com/nuxt-ui-templates/starter-vue"
4141
target="_blank"
4242
icon="simple-icons:github"
4343
aria-label="GitHub"

‎src/assets/css/main.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,4 @@
1818

1919
.dark {
2020
--ui-primary: var(--ui-color-primary-500);
21-
}
21+
}

‎src/components/AppLogo.vue‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<template>
2+
<svg
3+
width="951"
4+
height="200"
5+
viewBox="0 0 951 200"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg"
8+
>
9+
<path
10+
d="M308 200C310.16 200 312 198.209 312 196V103C312 103 317 112 326 127L365 194C366.785 197.74 370.744 200 374 200H401V50H374C372.202 50 370 51.4941 370 54V148L352 116L316 55C314.248 51.8912 310.479 50 307 50H281V200H308Z"
11+
fill="white"
12+
/>
13+
<path
14+
d="M657 92H670C673.314 92 676 89.3137 676 86V60H704V92H731V116H704V159C704 169.5 709.057 174 718 174H731V200H714C690.948 200 676 185.071 676 160V116H657V92Z"
15+
fill="white"
16+
/>
17+
<path
18+
d="M522 92V154C522 168.004 516.742 179.809 509 188C501.258 196.191 490.566 200 476 200C461.434 200 449.742 196.191 442 188C434.389 179.809 429 168.004 429 154V92H445C448.412 92 451.769 92.622 454 95C456.231 97.2459 457 98.5652 457 102V154C457 162.059 457.457 167.037 461 171C464.543 174.831 468.914 176 476 176C483.217 176 486.457 174.831 490 171C493.543 167.037 494 162.059 494 154V102C494 98.5652 494.769 96.378 497 94C498.96 91.9107 501.028 91.9599 504 92C504.411 92.0055 505.586 92 506 92H522Z"
19+
fill="white"
20+
/>
21+
<path
22+
d="M607 144L641 92H615C611.723 92 608.812 93.1758 607 96L591 120L576 97C574.188 94.1758 570.277 92 567 92H542L576 143L539 200H565C568.25 200 571.182 196.787 573 194L591 167L610 195C611.818 197.787 614.75 200 618 200H644L607 144Z"
23+
fill="white"
24+
/>
25+
<path
26+
d="M889 60.0001H869C864.524 60.0001 860.926 59.9395 858 63C855.074 65.8905 856 67.5792 856 72V141C856 151.372 854.648 156.899 850 162C845.352 166.931 839.468 169 830 169C820.705 169 813.648 166.931 809 162C804.352 156.899 804 151.372 804 141V72.0001C804 67.5793 803.926 65.8906 801 63.0001C798.074 59.9396 794.476 60.0001 790 60.0001H771V141C771 159.023 776.016 173.458 786 184C796.156 194.542 810.893 200 830 200C849.107 200 863.844 194.542 874 184C884.156 173.458 889 159.023 889 141V60.0001Z"
27+
fill="var(--ui-primary)"
28+
/>
29+
<path
30+
fill-rule="evenodd"
31+
clip-rule="evenodd"
32+
d="M931 60.0233L950.999 60V77L951 128V156.007L951 181L951 189.004C951 192.938 950.984 194.429 948 197.001C945.017 199.725 940.563 200 936 200H917.001V181.006L917 130.012V70.0215C917 66.1576 917.016 64.5494 920 62.023C922.819 59.6358 926.437 60.0233 931 60.0233Z"
33+
fill="var(--ui-primary)"
34+
/>
35+
<g clip-path="url(#clip0_5782_49)">
36+
<path
37+
d="M142.341 0.722534L115.607 46.604L88.8728 0.722534H0L115.607 199.422L231.214 0.722534H142.341Z"
38+
fill="var(--ui-primary)"
39+
/>
40+
<path
41+
d="M142.339 0.722534L115.605 46.604L88.8713 0.722534H46.2412L115.605 119.942L184.97 0.722534H142.339Z"
42+
fill="#35495E"
43+
/>
44+
</g>
45+
<defs>
46+
<clipPath id="clip0_5782_49">
47+
<rect
48+
width="231.214"
49+
height="200"
50+
fill="white"
51+
/>
52+
</clipPath>
53+
</defs>
54+
</svg>
55+
</template>

‎src/components/UILogo.vue‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎src/pages/index.vue‎

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<div>
33
<UPageHero
4-
title="Nuxt UI - Vue Starter"
5-
description="Nuxt UI is a free and open-source UI library for Nuxt applications. Create beautiful & responsive applications in minutes."
4+
title="Ship Faster with Nuxt UI"
5+
description="A production-ready Vue starter template powered by Nuxt UI. Build beautiful, accessible, and performant applications in minutes, not hours."
66
:links="[{
77
label: 'Get started',
88
to: 'https://ui.nuxt.com/getting-started/installation/vue',
@@ -11,9 +11,9 @@
1111
size: 'xl'
1212
}, {
1313
label: 'Use this template',
14-
to: 'https://github.com/nuxt-ui-pro/starter-vue',
14+
to: 'https://github.com/nuxt-ui-templates/starter-vue',
1515
target: '_blank',
16-
icon: 'simple-icons:github',
16+
icon: 'i-simple-icons-github',
1717
size: 'xl',
1818
color: 'neutral',
1919
variant: 'subtle'
@@ -22,41 +22,53 @@
2222

2323
<UPageSection
2424
id="features"
25-
title="The freedom to build anything"
26-
description="Nuxt UI ships with a comprehensive set of components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility."
25+
title="Everything you need to build modern Vue apps"
26+
description="Start with a solid foundation. This template includes all the essentials for building production-ready Vue applications with Nuxt UI's powerful component system."
2727
:features="[{
28-
icon: 'i-lucide-wrench',
29-
title: 'Fully customizable',
30-
description: 'Customize any component through the App Config or fine-tune specific instances with the ui prop for maximum flexibility.'
28+
icon: 'i-lucide-rocket',
29+
title: 'Vue 3 Composition API',
30+
description: 'Built with Vue 3\'s latest features including <script setup>, Composition API, and TypeScript support. Write cleaner, more maintainable code.'
3131
}, {
32-
icon: 'i-lucide-square-stack',
33-
title: 'Powerful slot system',
34-
description: 'Take full control of component layouts and content with Vue\'s comprehensive slot system for maximum flexibility.'
32+
icon: 'i-lucide-palette',
33+
title: 'Beautiful UI components',
34+
description: 'Access Nuxt UI\'s comprehensive component library in your Vue app. Automatic dark mode, consistent design, and fully customizable.'
3535
}, {
36-
icon: 'i-lucide-smartphone',
37-
title: 'Mobile-first & responsive',
38-
description: 'Built with a mobile-first approach, all components automatically adapt to any screen size while maintaining a polished look.'
36+
icon: 'i-lucide-zap',
37+
title: 'Lightning fast with Vite',
38+
description: 'Powered by Vite for instant HMR, optimized builds, and exceptional developer experience. Your development workflow will be blazing fast.'
39+
}, {
40+
icon: 'i-lucide-blocks',
41+
title: '100+ components included',
42+
description: 'From forms to navigation, modals to data tables - everything you need is accessible, responsive, and ready to use.'
43+
}, {
44+
icon: 'i-lucide-code-2',
45+
title: 'TypeScript first',
46+
description: 'Full TypeScript support with proper type definitions. Get IntelliSense, auto-completion, and catch errors before runtime.'
47+
}, {
48+
icon: 'i-lucide-shield-check',
49+
title: 'Production ready',
50+
description: 'Pre-configured with ESLint, Tailwind CSS, Vue Router, and best practices. Deploy with confidence from day one.'
3951
}]"
4052
/>
4153

4254
<UPageSection>
4355
<UPageCTA
44-
title="Start with Nuxt UI today!"
45-
description="Nuxt UI is a free and open-source UI library for Nuxt applications."
56+
title="Ready to build your next Vue app?"
57+
description="Join thousands of developers building with Vue 3 and Nuxt UI. Get this template and start shipping today."
4658
variant="subtle"
4759
:links="[{
48-
label: 'Get started',
60+
label: 'Start building',
4961
to: 'https://ui.nuxt.com/getting-started/installation/vue',
5062
target: '_blank',
51-
icon: 'i-lucide-arrow-right',
63+
trailingIcon: 'i-lucide-arrow-right',
5264
color: 'neutral'
5365
}, {
54-
label: 'GitHub',
55-
to: 'https://github.com/nuxt-ui-pro/starter-vue',
66+
label: 'View on GitHub',
67+
to: 'https://github.com/nuxt-ui-templates/starter-vue',
5668
target: '_blank',
57-
trailingIcon: 'simple-icons:github',
69+
icon: 'i-simple-icons-github',
5870
color: 'neutral',
59-
variant: 'subtle'
71+
variant: 'outline'
6072
}]"
6173
/>
6274
</UPageSection>

0 commit comments

Comments
 (0)