nuxt-ui-templates · benjamincanac · Sep 3, 2025 · Aug 18, 2025 · Aug 20, 2025 · Sep 3, 2025
diff --git a/.env.example b/.env.example
diff --git a/README.md b/README.md
@@ -1,11 +1,25 @@
 # Vue Starter Template
 
-[![Nuxt UI Pro](https://img.shields.io/badge/Made%20with-Nuxt%20UI%20Pro-00DC82?logo=nuxt&labelColor=020420)](https://ui.nuxt.com/pro)
+[![Nuxt UI](https://img.shields.io/badge/Made%20with-Nuxt%20UI-00DC82?logo=nuxt&labelColor=020420)](https://ui.nuxt.com)
 
-This Vue starter lets you get started with [Nuxt UI Pro](https://ui.nuxt.com/pro) quickly.
+Use this template to get started with [Nuxt UI](https://ui.nuxt.com) quickly.
 
-- [Live demo](https://ui-pro-starter-vue.nuxt.dev/)
-- [Documentation](https://ui.nuxt.com/getting-started/installation/pro/vue)
+- [Live demo](https://starter-vue-template.nuxt.dev/)
+- [Documentation](https://ui.nuxt.com/getting-started/installation/vue)
+
+<a href="https://starter-vue-template.nuxt.dev/" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://ui4.nuxt.com/assets/templates/vue/starter-dark.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://ui4.nuxt.com/assets/templates/vue/starter-light.png">
+    <img alt="Vue Starter Template" src="https://ui4.nuxt.com/assets/templates/vue/starter-light.png">
+  </picture>
+</a>
+
+## Quick Start
+
+```bash [Terminal]
+npx giget@latest gh:nuxt-ui-templates/starter-vue my-vue-starter
+```
 
 ## Setup
 

diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.bunny.net">
     <link href="https://fonts.bunny.net/css?family=public-sans:400,500,600,700" rel="stylesheet" />
     <title>Vue Starter Template</title>
-    <meta name="description" content="Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.">
+    <meta name="description" content="A production-ready starter template powered by Nuxt UI. Build beautiful, accessible, and performant applications in minutes, not hours.">
   </head>
   <body>
     <div id="app" class="isolate"></div>

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "nuxt-ui-pro-starter-vue",
+  "name": "nuxt-ui-template-starter-vue",
   "private": true,
   "type": "module",
   "scripts": {
@@ -10,7 +10,7 @@
     "typecheck": "vue-tsc -p ./tsconfig.app.json"
   },
   "dependencies": {
-    "@nuxt/ui-pro": "^3.3.2",
+    "@nuxt/ui": "^4.0.0-alpha.1",
     "vue": "^3.5.20",
     "vue-router": "^4.5.1"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.vue b/src/App.vue
@@ -4,15 +4,15 @@
       <UHeader>
         <template #left>
           <RouterLink to="/">
-            <LogoPro class="w-auto h-6 shrink-0" />
+            <AppLogo class="w-auto h-6 shrink-0" />
           </RouterLink>
         </template>
 
         <template #right>
           <UColorModeButton />
 
           <UButton
-            to="https://github.com/nuxt-ui-pro/starter-vue"
+            to="https://github.com/nuxt-ui-templates/starter-vue"
             target="_blank"
             icon="simple-icons:github"
             aria-label="GitHub"
@@ -31,13 +31,13 @@
       <UFooter>
         <template #left>
           <p class="text-sm text-muted">
-            Copyright © {{ new Date().getFullYear() }}
+            Built with Nuxt UI • © {{ new Date().getFullYear() }}
           </p>
         </template>
 
         <template #right>
           <UButton
-            to="https://github.com/nuxt-ui-pro/starter-vue"
+            to="https://github.com/nuxt-ui-templates/starter-vue"
             target="_blank"
             icon="simple-icons:github"
             aria-label="GitHub"

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -1,5 +1,5 @@
 @import "tailwindcss";
-@import "@nuxt/ui-pro";
+@import "@nuxt/ui";
 
 @theme static {
   --font-sans: 'Public Sans', sans-serif;
@@ -18,4 +18,4 @@
 
 .dark {
   --ui-primary: var(--ui-color-primary-500);
-}
+}
diff --git a/src/components/LogoPro.vue → src/components/AppLogo.vue b/src/components/LogoPro.vue → src/components/AppLogo.vue
@@ -1,38 +1,38 @@
 <template>
   <svg
-    width="1283"
+    width="951"
     height="200"
-    viewBox="0 0 1283 200"
+    viewBox="0 0 951 200"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       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"
-      fill="currentColor"
+      fill="white"
     />
     <path
       d="M657 92H670C673.314 92 676 89.3137 676 86V60H704V92H731V116H704V159C704 169.5 709.057 174 718 174H731V200H714C690.948 200 676 185.071 676 160V116H657V92Z"
-      fill="currentColor"
+      fill="white"
     />
     <path
       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"
-      fill="currentColor"
+      fill="white"
     />
     <path
       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"
-      fill="currentColor"
+      fill="white"
     />
     <path
-      d="M889 60.0001H869C864.524 60.0001 860.926 59.9395 858 63C855.074 65.8905 856 67.5793 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"
-      fill="currentColor"
+      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"
+      fill="var(--ui-primary)"
     />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      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.0216C917 66.1576 917.016 64.5494 920 62.023C922.819 59.6359 926.437 60.0233 931 60.0233Z"
-      fill="currentColor"
+      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"
+      fill="var(--ui-primary)"
     />
-    <g clip-path="url(#clip0_5782_41)">
+    <g clip-path="url(#clip0_5782_49)">
       <path
         d="M142.341 0.722534L115.607 46.604L88.8728 0.722534H0L115.607 199.422L231.214 0.722534H142.341Z"
         fill="var(--ui-primary)"
@@ -42,24 +42,12 @@
         fill="#35495E"
       />
     </g>
-    <path
-      d="M991 200V60H1048C1057.67 60 1065.98 61.2896 1073 65C1080.16 68.7104 1086.29 74.3744 1090 81C1093.71 87.6256 1095 95.3867 1095 104C1095 112.481 1093.71 120.374 1090 127C1086.29 133.626 1080.16 138.157 1073 142C1065.98 145.71 1057.67 148 1048 148H1021V200H991ZM1046 123C1052.63 123 1057.69 121.578 1061 118C1064.31 114.29 1066 109.433 1066 104C1066 98.567 1064.31 93.5778 1061 90C1057.69 86.2896 1052.63 85 1046 85H1021V123H1046Z"
-      fill="var(--ui-primary)"
-    />
-    <path
-      d="M1157 123C1150.37 123 1145.31 124.965 1142 130C1138.69 135.035 1137 142.122 1137 151V200H1109V100H1131C1134.31 100 1137 102.686 1137 106V116C1139.65 109.904 1142.16 106.518 1146 104C1149.98 101.482 1155.77 100 1162 100H1173V123H1157Z"
-      fill="var(--ui-primary)"
-    />
-    <path
-      d="M1230 200C1219.93 200 1211.08 197.373 1203 193C1194.92 188.495 1188.51 182.818 1184 175C1179.49 167.049 1177 157.806 1177 148C1177 138.194 1179.49 129.818 1184 122C1188.51 114.049 1194.92 107.373 1203 103C1211.08 98.4946 1219.93 97 1230 97C1240.07 97 1249.92 98.4946 1258 103C1266.08 107.373 1271.49 114.049 1276 122C1280.51 129.818 1283 138.194 1283 148C1283 157.806 1280.51 167.049 1276 175C1271.49 182.818 1266.08 188.495 1258 193C1249.92 197.373 1240.07 200 1230 200ZM1230 176C1237.42 176 1243.36 173.168 1248 168C1252.64 162.832 1255 156.216 1255 148C1255 139.652 1252.64 133.168 1248 128C1243.36 122.832 1237.42 120 1230 120C1222.58 120 1216.64 122.832 1212 128C1207.36 133.168 1205 139.652 1205 148C1205 156.216 1207.36 162.832 1212 168C1216.64 173.168 1222.58 176 1230 176Z"
-      fill="var(--ui-primary)"
-    />
     <defs>
-      <clipPath id="clip0_5782_41">
+      <clipPath id="clip0_5782_49">
         <rect
           width="231.214"
           height="200"
-          fill="currentColor"
+          fill="white"
         />
       </clipPath>
     </defs>

diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
     <UPageHero
-      title="Nuxt UI Pro - Vue Starter"
-      description="Nuxt UI Pro is a collection of premium components built on top of Nuxt UI to create beautiful & responsive applications in minutes."
+      title="Vue Starter Template"
+      description="A production-ready starter template powered by Nuxt UI. Build beautiful, accessible, and performant applications in minutes, not hours."
       :links="[{
         label: 'Get started',
-        to: 'https://ui.nuxt.com/getting-started/installation/pro/vue',
+        to: 'https://ui.nuxt.com/getting-started/installation/vue',
         target: '_blank',
         trailingIcon: 'i-lucide-arrow-right',
         size: 'xl'
       }, {
         label: 'Use this template',
-        to: 'https://github.com/nuxt-ui-pro/starter-vue',
+        to: 'https://github.com/nuxt-ui-templates/starter-vue',
         target: '_blank',
         icon: 'simple-icons:github',
         size: 'xl',
@@ -22,41 +22,53 @@
 
     <UPageSection
       id="features"
-      title="The freedom to build anything"
-      description="Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility."
+      title="Everything you need to build modern Vue apps"
+      description="Start with a solid foundation. This template includes all the essentials for building production-ready applications with Nuxt UI's powerful component system."
       :features="[{
-        icon: 'i-lucide-wrench',
-        title: 'Fully customizable',
-        description: 'Customize any component through the App Config or fine-tune specific instances with the ui prop, just like Nuxt UI.'
+        icon: 'i-lucide-rocket',
+        title: 'Production-ready from day one',
+        description: 'Pre-configured with TypeScript, ESLint, Tailwind CSS, and Vite. Focus on building features, not setting up tooling.'
       }, {
-        icon: 'i-lucide-square-stack',
-        title: 'Powerful slot system',
-        description: 'Take full control of component layouts and content with Vue\'s comprehensive slot system for maximum flexibility.'
+        icon: 'i-lucide-palette',
+        title: 'Beautiful by default',
+        description: 'Powered by Nuxt UI\'s design system with automatic dark mode, consistent spacing, and polished components that look great out of the box.'
       }, {
-        icon: 'i-lucide-smartphone',
-        title: 'Mobile-first & responsive',
-        description: 'Built with a mobile-first approach, all components automatically adapt to any screen size while maintaining a polished look.'
+        icon: 'i-lucide-zap',
+        title: 'Lightning fast',
+        description: 'Optimized with Vite\'s blazing fast HMR, automatic code splitting, and tree-shaking. Your users will love the speed.'
+      }, {
+        icon: 'i-lucide-blocks',
+        title: '100+ components included',
+        description: 'Access Nuxt UI\'s comprehensive component library. From forms to navigation, everything is accessible, responsive, and customizable.'
+      }, {
+        icon: 'i-lucide-code-2',
+        title: 'Developer experience first',
+        description: 'Auto-imports, hot module replacement, TypeScript support, and Vue DevTools integration. Write less boilerplate and ship more features.'
+      }, {
+        icon: 'i-lucide-shield-check',
+        title: 'Built for scale',
+        description: 'Modern Vue 3 architecture with Composition API, proper error handling, and security best practices built-in.'
       }]"
     />
 
     <UPageSection>
       <UPageCTA
-        title="Start with Nuxt UI Pro today!"
-        description="Nuxt UI Pro is free in development, but you need a license to use it in production."
+        title="Ready to build your next Vue app?"
+        description="Join thousands of developers building with Vue and Nuxt UI. Get this template and start shipping today."
         variant="subtle"
         :links="[{
-          label: 'Buy now',
-          to: 'https://ui.nuxt.com/pro/purchase',
+          label: 'Start building',
+          to: 'https://ui.nuxt.com/getting-started/installation/vue',
           target: '_blank',
-          icon: 'i-lucide-shopping-cart',
+          trailingIcon: 'i-lucide-arrow-right',
           color: 'neutral'
         }, {
-          label: 'License',
-          to: 'https://ui.nuxt.com/getting-started/license',
+          label: 'View on GitHub',
+          to: 'https://github.com/nuxt-ui-templates/starter-vue',
           target: '_blank',
-          trailingIcon: 'i-lucide-circle-help',
+          icon: 'simple-icons:github',
           color: 'neutral',
-          variant: 'subtle'
+          variant: 'outline'
         }]"
       />
     </UPageSection>

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,12 +1,12 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import uiPro from '@nuxt/ui-pro/vite'
+import ui from '@nuxt/ui/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
-    uiPro({
+    ui({
       ui: {
         colors: {
           primary: 'green',