How to register a global component

[ottobolyos]

I have read the docs, however, I am new to Vue/Vite, therefore, I might need some help.

I want to register a component composed of a <script lang='ts' setup> tag (no HTML nor CSS or anything else) for every page. I want to use it for keyboard navigation, i.e. when a user presses certain keyboard shortcuts, it would redirect to a certain page.

Here’s the code:

<script lang='ts' setup>
import {useMagicKeys} from '@vueuse/core'
import {useData, useRouter} from 'vitepress'
import {watch} from 'vue'

const keys = useMagicKeys()
const keyU = keys['u']
const u = useData()
const router = useRouter()
let oldPath = u.page.getter().relativePath.replace(/\.(md|html)$/, '')

watch(keyU, v => {
  if (v) {
    const newPath = '/user'
    console.log(`\`u\` have been pressed, redirecting to \`${newPath}\` ...`)

    if (newPath !== oldPath && !document.activeElement?.classList.contains('search-input')) {
      router.go(newPath)
      oldPath = newPath
    }
  }
})
</script>

Now, this works when I inline it into a single MD file, however, when I place it into $docsRoot/component/global/KeyboardNavigation.vue and create $docsRoot/.vitepress.theme/index.ts with the following content:

import type {Theme} from 'vitepress'
import DefaultTheme from 'vitepress/theme'

export default {
  extends: DefaultTheme,
  enhanceApp({app}) {
    // register your custom global components
    app.component('KeyboardNavigation')
  }
} satisfies Theme

it does not work.

I have also tried to add import KeyboardNavigation from '../../component/global/KeyboardNavigation.vue' into index.ts and use it in app.component('KeyboardNavigation', KeyboardNavigation), however, that didn’t work either.

What do I do wrong? Do I need to import that $docsRoot/.vitepress.theme/index.ts somewhere? Do I need to import the component differently or somewhere else?

Thanks in advance! 🙏

[brc-dd]

Global components there means component that can be used anywhere without importing. You want to execute some code in each of the pages without even mentioning the component, so you need to write the Layout:

// .vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'
import Layout from './Layout.vue'

export default {
  extends: DefaultTheme,
  Layout
}

Inside .vitepress/theme/Layout.vue:

<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'

// ... your rest of key handling logic ...
</script>

<template>
  <DefaultTheme.Layout />
</template>

[ottobolyos]

Is adding import KeyboardNavigation from '../../component/global/KeyboardNavigation.vue' to Layout.vue enough? It does not work for me.

// .vitepress/theme/index.ts
import type {Theme} from 'vitepress'
import DefaultTheme from 'vitepress/theme'

import Layout from './Layout.vue'

export default {
  extends: DefaultTheme,
  Layout
} satisfies Theme

// .vitepress/theme/Layout.vue
<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'

import KeyboardNavigation from '../../component/global/KeyboardNavigation.vue'
</script>

<template>
  <DefaultTheme.Layout />
</template>

// component/global/KeyboardNavigation.vue
<script lang='ts' setup>
import {useMagicKeys} from '@vueuse/core'
import {useData, useRouter} from 'vitepress'
import {watch} from 'vue'

const keys = useMagicKeys()
const router = useRouter()
let oldPath = (useData()).page.getter().relativePath.replace(/\.(md|html)$/, '')

watch(keys['u'], v => {
  if (v) {
    const newPath = '/user'
    console.log(`\`u\` have been pressed, redirecting to \`${newPath}\` ...`)

    // Redirect only when we are not on the page already and when we have not selected the search box
    if (newPath !== oldPath && !document.activeElement?.classList.contains('search-input')) {
      router.go(newPath)
      oldPath = newPath
    }
  }
})
</script>

[brc-dd]

You need to use that component. Just importing does nothing. Also you should write a composable instead, not component.

[ottobolyos]

Thanks, @brc-dd, that was it! 🙏

Sorry for asking such a newbie question that is not much related to VitePress.

Anyway, the Vue docs helped to to create a composable and it works as expected! 🎉