Site: Respect config.base (VITEPRESS_BASE) variable in Vue components too

Author: rhorenov

docs/.vitepress/theme/components/blog/BlogCard.vue

@@ -2,7 +2,7 @@
   <div class="blog-card">
     <div class="blog-card-header">
       <h3 class="blog-card-title">
-        <a :href="post.url">{{ post.title }}</a>
+        <a :href="withBase(post.url)">{{ post.title }}</a>
       </h3>
       <div class="blog-card-meta">
         <span class="blog-date">📅 {{ post.date.string }}</span>
@@ -16,7 +16,7 @@
       <a
         v-for="resolvedTag in resolvedTags.slice(0, 5)"
         :key="resolvedTag.slug"
-        :href="resolvedTag.url"
+        :href="withBase(resolvedTag.url)"
         :class="['blog-tag', resolvedTag.type]"
       >
         {{ resolvedTag.title }}
@@ -29,6 +29,7 @@
 import { computed } from 'vue';
 import type { BlogPost } from '@/core/data-loaders/blog.data';
 import { resolveTags } from '@/core/utils';
+import { withBase } from 'vitepress';
 
 interface Props {
   post: BlogPost;

docs/.vitepress/theme/components/blog/BlogPostMeta.vue

@@ -16,7 +16,7 @@
         <a
           v-for="resolvedTag in resolvedTags"
           :key="resolvedTag.slug"
-          :href="resolvedTag.url"
+          :href="withBase(resolvedTag.url)"
           :class="['tag', resolvedTag.type]"
         >
           {{ resolvedTag.title }}
@@ -30,6 +30,7 @@
 import { useData } from 'vitepress';
 import { computed } from 'vue';
 import { resolveTags } from '@/core/utils/tagResolver';
+import { withBase } from 'vitepress';
 
 const { frontmatter } = useData();
 

docs/.vitepress/theme/components/categories/CategoryGrid.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="category-grid">
-    <a v-for="category in categories" :key="category.slug" :href="`/categories/${category.slug}`" class="category-card">
+    <a
+      v-for="category in categories"
+      :key="category.slug"
+      :href="withBase(`/categories/${category.slug}`)"
+      class="category-card"
+    >
       <span class="category-badge">{{ category.count }}</span>
       <span class="category-icon">{{ category.icon }}</span>
       <h3 class="category-title">{{ category.title }}</h3>
@@ -13,6 +18,7 @@
 import { computed } from 'vue';
 import { data as tools } from '@/core/data-loaders/tools.data';
 import { CATEGORIES } from '@/core/metadata/categories';
+import { withBase } from 'vitepress';
 
 interface Props {
   sortByCount?: boolean;

docs/.vitepress/theme/components/categories/RelatedCategories.vue

@@ -2,7 +2,7 @@
   <div v-if="relatedCategories.length > 0">
     <ul>
       <li v-for="category in relatedCategories" :key="category.slug">
-        <a :href="`./${category.slug}`">{{ category.title }}</a>
+        <a :href="withBase(`./${category.slug}`)">{{ category.title }}</a>
       </li>
     </ul>
   </div>
@@ -13,6 +13,7 @@
 import { computed } from 'vue';
 import { useRoute } from 'vitepress';
 import { getCategoryBySlug } from '@/core/metadata/categories';
+import { withBase } from 'vitepress';
 
 const route = useRoute();
 

docs/.vitepress/theme/components/standards/StandardsGrid.vue

@@ -3,7 +3,7 @@
     <a
       v-for="standard in standards"
       :key="standard.slug"
-      :href="`/standards/${standard.slug}`"
+      :href="withBase(`/standards/${standard.slug}`)"
       class="category-card standard-card"
     >
       <span class="category-badge">{{ standard.count }}</span>
@@ -18,6 +18,7 @@
 import { computed } from 'vue';
 import { data as tools } from '@/core/data-loaders/tools.data';
 import { getStandardMetadata } from '@/core/metadata/standards';
+import { withBase } from 'vitepress';
 
 interface Props {
   sortByCount?: boolean;

docs/.vitepress/theme/components/tools/ToolCard.vue

@@ -5,7 +5,7 @@
         {{ statusEmoji }} {{ statusLabel }}
       </div>
       <h3 class="tool-card-title">
-        <a :href="`/tools/${tool.slug}`">{{ tool.title }}</a>
+        <a :href="withBase(`/tools/${tool.slug}`)">{{ tool.title }}</a>
       </h3>
       <p v-if="subtitle" class="tool-card-subtitle">{{ subtitle }}</p>
     </div>
@@ -23,14 +23,15 @@
       <a v-if="tool.website" :href="tool.website" target="_blank" class="tool-link"> Website </a>
       <a v-if="tool.repository" :href="tool.repository" target="_blank" class="tool-link"> Repository </a>
       <a v-if="tool.documentation" :href="tool.documentation" target="_blank" class="tool-link"> Documentation </a>
-      <a :href="`/tools/${tool.slug}`" class="tool-link">Details</a>
+      <a :href="withBase(`/tools/${tool.slug}`)" class="tool-link">Details</a>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Tool } from '@/core/data-loaders/tools.data';
+import { withBase } from 'vitepress';
 
 interface Props {
   tool: Tool;

docs/.vitepress/theme/components/tools/ToolMetadata.vue

@@ -5,14 +5,14 @@
       <li v-if="resolvedCategories.length > 0">
         <strong>Categories</strong>:
         <template v-for="(category, index) in resolvedCategories" :key="category.slug">
-          <a :href="category.url">{{ category.title }}</a>
+          <a :href="withBase(category.url)">{{ category.title }}</a>
           <span v-if="index < resolvedCategories.length - 1">, </span>
         </template>
       </li>
       <li v-if="resolvedStandards.length > 0">
         <strong>Standards</strong>:
         <template v-for="(standard, index) in resolvedStandards" :key="standard.slug">
-          <a :href="standard.url">{{ standard.title }}</a>
+          <a :href="withBase(standard.url)">{{ standard.title }}</a>
           <span v-if="index < resolvedStandards.length - 1">, </span>
         </template>
       </li>
@@ -92,6 +92,7 @@ import { computed } from 'vue';
 import { useData } from 'vitepress';
 import { getCategoryBySlug } from '@/core/metadata/categories';
 import { data as standardsData } from '@/core/data-loaders/standards.data';
+import { withBase } from 'vitepress';
 
 const { frontmatter } = useData();
 

docs/standards/[standard].md

@@ -5,6 +5,7 @@
 <script setup>
 // This import ensures VitePress watches standards.yaml for changes
 import { data as _standardsData } from '../.vitepress/core/data-loaders/standards.data'
+import { withBase } from 'vitepress'
 </script>
 
 # {{ $params.standardName }}
@@ -37,7 +38,7 @@ import { data as _standardsData } from '../.vitepress/core/data-loaders/standard
 
 <ul>
   <li v-for="related in $params.details.related_standards_with_titles" :key="related.slug">
-    <a :href="`/standards/${related.slug}`">{{ related.title }}</a>
+    <a :href="withBase(`/standards/${related.slug}`)">{{ related.title }}</a>
   </li>
 </ul>