nuxt-ui-templates · benjamincanac · Feb 27, 2025 · Feb 25, 2025 · Feb 25, 2025 · Feb 25, 2025
diff --git a/app/app.vue b/app/app.vue
@@ -21,8 +21,6 @@ useHead({
 useSeoMeta({
   titleTemplate: `%s - ${seo?.siteName}`,
   ogSiteName: seo?.siteName,
-  ogImage: 'https://docs-template.nuxt.dev/social-card.png',
-  twitterImage: 'https://docs-template.nuxt.dev/social-card.png',
   twitterCard: 'summary_large_image'
 })
 

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
@@ -1,7 +1,7 @@
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
 
-@source "../../../content";
+@source "../../../content/**/*";
 
 @theme {
   --font-sans: 'Public Sans', sans-serif;

diff --git a/app/components/OgImage/OgImageDocs.vue b/app/components/OgImage/OgImageDocs.vue
@@ -1,27 +1,74 @@
-<script setup lang="ts">
-defineOptions({
-  inheritAttrs: false
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
+  title: 'title',
+  description: 'description'
 })
 
-defineProps({
-  title: {
-    type: String,
-    required: true
-  },
-  description: {
-    type: String,
-    required: true
-  }
-})
+const title = computed(() => (props.title || '').slice(0, 60))
+const description = computed(() => (props.description || '').slice(0, 200))
 </script>
 
 <template>
-  <div class="w-full h-full flex flex-col justify-center text-center bg-slate-900 p-8">
-    <div class="relative">
-      <h1 class="text-8xl mb-4 text-white">
-        {{ title }}
+  <div class="w-full h-full flex flex-col justify-center bg-[#020420]">
+    <svg
+      class="absolute right-0 top-0"
+      width="629"
+      height="593"
+      viewBox="0 0 629 593"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_f_199_94966)">
+        <path
+          d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+          fill="#00DC82"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_199_94966"
+          x="0.873535"
+          y="-659"
+          width="1255.25"
+          height="1251.52"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood
+            flood-opacity="0"
+            result="BackgroundImageFix"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="40.5"
+            result="effect1_foregroundBlur_199_94966"
+          />
+        </filter>
+      </defs>
+    </svg>
+
+    <div class="pl-[100px]">
+      <p
+        v-if="headline"
+        class="uppercase text-[24px] text-[#00DC82] mb-4 font-semibold"
+      >
+        {{ headline }}
+      </p>
+      <h1
+        v-if="title"
+        class="m-0 text-[75px] font-semibold mb-4 text-white flex items-center"
+      >
+        <span>{{ title }}</span>
       </h1>
-      <p class="text-5xl text-gray-200 leading-tight">
+      <p
+        v-if="description"
+        class="text-[32px] text-[#E4E4E7] leading-tight w-[700px]"
+      >
         {{ description }}
       </p>
     </div>

diff --git a/app/pages/[...slug].vue b/app/pages/[...slug].vue
@@ -28,9 +28,13 @@
   ogDescription: page.value.seo.description
 })
 
-defineOgImageComponent('Docs')
+const headline = computed(() => findPageHeadline(navigation.value, page.value))
 
-const headline = computed(() => findPageHeadline(navigation!.value, page.value))
+defineOgImageComponent('Docs', {
+  title: page.value.title,
+  description: page.value.description,
+  headline: headline.value
+})
 
 const links = computed(() => {
   const links = []

diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -9,7 +9,9 @@ useSeoMeta({
   titleTemplate: null,
   ogTitle: page.value.seo.title,
   description: page.value.seo.description,
-  ogDescription: page.value.seo.description
+  ogDescription: page.value.seo.description,
+  ogImage: 'https://docs-template.nuxt.dev/social-card.png',
+  twitterImage: 'https://docs-template.nuxt.dev/social-card.png'
 })
 </script>
 

diff --git a/content/1.getting-started/.navigation.yml b/content/1.getting-started/.navigation.yml
@@ -1 +1,2 @@
-title: Getting Started
+title: Getting Started
+icon: false
diff --git a/content/1.getting-started/1.index.md b/content/1.getting-started/1.index.md
@@ -1,53 +1,87 @@
 ---
 title: Introduction
 description: Welcome to Nuxt UI Pro documentation template.
+navigation.icon: i-lucide-house
 ---
 
-This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in minutes.
+This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui3.nuxt.dev/pro), a collection of premium components built on top of [Nuxt UI](https://ui3.nuxt.dev) to create beautiful & responsive Nuxt applications in minutes.
 
 There are already many websites based on this template:
 
-- [Nuxt](https://nuxt.com) - The Nuxt website
-- [Nuxt UI](https://ui.nuxt.com) - The documentation of `@nuxt/ui` and `@nuxt/ui-pro`
-- [Nuxt Image](https://image.nuxt.com) - The documentation of `@nuxt/image`
-- [Nuxt Content](https://content.nuxt.com) - The documentation of `@nuxt/content`
-- [Nuxt Devtools](https://devtools.nuxt.com) - The documentation of `@nuxt/devtools`
-- [Nuxt Studio](https://content.nuxt.com/docs/studio) - The pro version of Nuxt Content
+::card-group
 
-## Features
+::card
+---
+title: Nuxt
+icon: i-simple-icons-nuxtdotjs
+to: https://nuxt.com
+target: _blank
+---
+The Nuxt website
+::
 
-- Powered by [Nuxt 3](https://nuxt.com)
-- Built with [Nuxt UI](https://ui.nuxt.com) and [Nuxt UI Pro](https://ui.nuxt.com/pro)
-- Write content with [MDC syntax](https://content.nuxt.com/usage/markdown) thanks to [Nuxt Content](https://content.nuxt.com)
-- Compatible with [Nuxt Studio](https://content.nuxt.com/docs/studio)
-- Auto-generated sidebar navigation
-- Full-Text Search out of the box
-- Beautiful Typography styles
-- Dark mode support
-- And more...
+::card
+---
+title: Nuxt UI
+icon: i-simple-icons-nuxtdotjs
+to: https://ui3.nuxt.dev
+target: _blank
+---
+The documentation of `@nuxt/ui` and `@nuxt/ui-pro`
+::
 
-## Play online
+::card
+---
+title: Nuxt Image
+icon: i-simple-icons-nuxtdotjs
+to: https://image.nuxt.com
+target: _blank
+---
+The documentation of `@nuxt/image`
+::
 
-You can start playing with this template in your browser using our online sandboxes:
+::card
+---
+title: Nuxt Content
+icon: i-simple-icons-nuxtdotjs
+to: https://content.nuxt.com
+target: _blank
+---
+The documentation of `@nuxt/content`
+::
 
-::u-button
+::card
 ---
-class: mr-4
-icon: i-simple-icons-stackblitz
-label: Play on StackBlitz
+title: Nuxt Devtools
+icon: i-simple-icons-nuxtdotjs
+to: https://devtools.nuxt.com
 target: _blank
-to: https://stackblitz.com/github/nuxt-ui-pro/docs/
 ---
+The documentation of `@nuxt/devtools`
 ::
 
-::u-button
+::card
 ---
-class: mt-2 sm:mt-0
-icon: i-simple-icons-codesandbox
-label: Play on CodeSandbox
+title: Nuxt Hub
+icon: i-simple-icons-nuxtdotjs
+to: https://hub.nuxt.com
 target: _blank
-to: https://codesandbox.io/s/github/nuxt-ui-pro/docs/
 ---
+The best place to manage your projects, environments and variables.
+::
+
 ::
 
-Or open [Nuxt UI playground](https://ui.nuxt.com/playground).
+## Key Features
+
+This template includes a range of features designed to streamline documentation management:
+
+- **Powered by [Nuxt 3](https://nuxt.com)**: Utilizes the latest Nuxt framework for optimal performance.
+- **Built with [Nuxt UI](https://ui3.nuxt.dev) and [Nuxt UI Pro](https://ui3.nuxt.dev/pro)**: Integrates a comprehensive suite of UI components.
+- **[MDC Syntax](https://content.nuxt.com/usage/markdown) via [Nuxt Content](https://content.nuxt.com)**: Supports Markdown with component integration for dynamic content.
+- **[Nuxt Studio](https://content.nuxt.com/docs/studio) Compatible**:  Offers integration with Nuxt Studio for content editing.
+- **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure.
+- **Full-Text Search**:  Includes built-in search functionality for content discovery.
+- **Optimized Typography**:  Features refined typography for enhanced readability.
+- **Dark Mode**:  Offers dark mode support for user preference.
+- **Extensive Functionality**:  Explore the template to fully appreciate its capabilities.
diff --git a/content/1.getting-started/2.installation.md b/content/1.getting-started/2.installation.md
@@ -1,6 +1,7 @@
 ---
 title: Installation
 description: Get started with Nuxt UI Pro documentation template.
+navigation.icon: i-lucide-download
 ---
 
 ::tip{target="_blank" to="https://content.nuxt.com/templates/docs"}