nuxt-themes/docus

Custom Components

JK-Effects opened this issue · 4 comments

JK-Effects commented

How can I create a custom component to use in Markdown files?

One use case is to display socket.io or http requests with body, to-send data, and their responses, or to create a direct connection from the component to e.g. an api.

1bye commented

Go into node_modules/@nuxt-themes/elements/components/globals/, then add your component:

custom.vue:

<template>
   <div>
      <slot />
   </div>
</template>
// script, style etc...

Your any .md:

<!-- inline component -->
:custom{}-hello

<!-- Regular component -->
::custom
hello world
::

Hope this helps

JK-Effects commented

I want to add the components in the project-root directory so that I can share and push the code to git without having to also worry about not overwriting or forgetting the components in the node_modules directory.

1bye commented

If we look in the node_modules/@nuxt-themes/elements/nuxt.config.ts, in this file we define global components, and as I remember in @nuxt-content, if we define components as global, they should be defined in .md

import { createResolver } from '@nuxt/kit'

const { resolve } = createResolver(import.meta.url)

// That allows to overwrite these dependencies paths via `.env` for local development
const envModules = {
  tokens: process?.env?.THEME_DEV_TOKENS_PATH || '@nuxt-themes/tokens'
}

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: [envModules.tokens],

  components: [
    { path: resolve('components/globals'), global: true, prefix: '' },
    { path: resolve('components/icons'), global: true, prefix: '' },
    { path: resolve('components/landing'), global: true, prefix: '' },
    { path: resolve('components/volta'), global: true, prefix: '' },
    { path: resolve('components/meta'), global: true, prefix: '' }
  ]
})

Also if look at node_modules/@nuxt-themes/docus/nuxt.config.ts, we can notice it extend the node_modules/@nuxt-themes/elements/

import { createResolver, logger, defineNuxtModule } from '@nuxt/kit'
import { $fetch } from 'ofetch'
import { version } from './package.json'

const { resolve } = createResolver(import.meta.url)

// That allows to overwrite these dependencies paths via `.env` for local development
const envModules = {
  tokens: process?.env?.THEME_DEV_TOKENS_PATH || '@nuxt-themes/tokens',
  elements: process?.env?.THEME_DEV_ELEMENTS_PATH || '@nuxt-themes/elements',
  studio: process?.env?.THEME_DEV_STUDIO_PATH || '@nuxthq/studio',
  typography: process?.env?.THEME_DEV_TYPOGRAPHY_PATH || '@nuxt-themes/typography'
}

const updateModule = defineNuxtModule({
  meta: {
    name: '@nuxt-themes/docus'
  },
  setup (_, nuxt) {
    if (nuxt.options.dev) {
      $fetch('https://registry.npmjs.org/@nuxt-themes/docus/latest').then((release) => {
        if (release.version > version) {
          logger.info(`A new version of Docus (v${release.version}) is available: https://github.com/nuxt-themes/docus/releases/latest`)
        }
      }).catch(() => {})
    }
  }
})

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  routeRules: {
    '/api/search': {
      prerender: true,
      cache: true
    }
  },
  app: {
    head: {
      htmlAttrs: {
        lang: 'en'
      }
    }
  },
  extends: [
    envModules.typography,
    envModules.elements
  ],
  modules: [
    envModules.tokens,
    envModules.studio,
    '@nuxtjs/color-mode',
    '@nuxt/content',
    '@vueuse/nuxt',
    'nuxt-config-schema',
    resolve('./app/module'),
    updateModule as any
  ],
  // etc...

I don't tried this, and I'm not the docus creator, but try define components as globals.

JK-Effects commented

Making the component explicitly global works fine.

Thanks for your help.

  • 👍1