https://github.com/07akioni/naive-ui-vitepress-demo

This is a demo for using `naive-ui` in `vitepress` with SSR enabled.
https://github.com/07akioni/naive-ui-vitepress-demo

Last synced: 28 days ago
JSON representation

This is a demo for using `naive-ui` in `vitepress` with SSR enabled.

• Host: GitHub
• URL: https://github.com/07akioni/naive-ui-vitepress-demo
• Owner: 07akioni
• License: mit
• Created: 2024-05-05T13:08:50.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-05-05T13:45:37.000Z (8 months ago)
• Last Synced: 2024-10-29T20:25:52.245Z (about 2 months ago)
• Language: TypeScript
• Size: 7.81 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# naive-ui-vitepress-demo

English · [中文](README.zh_CN.md)

This is a demo for using `naive-ui` in `vitepress` with SSR enabled.

You can directly use the demo.

## Key process from scratch

If you want to build your own demo from scratch, follow the next steps:

### 0. Install `@css-render/vue3-ssr`

Make sure its version `>=0.15.14`.

```bash

# npm

npm install --save-dev @css-render/vue3-ssr

# pnpm

pnpm install --save-dev @css-render/vue3-ssr

```

### 1. Add this content to `.vitepress/theme/index.js`

```js

// .vitepress/theme/index.js

import { defineComponent, h, inject } from 'vue'

import DefaultTheme from 'vitepress/theme'

import { NConfigProvider } from 'naive-ui'

import { setup } from '@css-render/vue3-ssr'

import { useRoute } from 'vitepress'

const { Layout } = DefaultTheme

const CssRenderStyle = defineComponent({

  setup() {

    const collect = inject('css-render-collect')

    return {

      style: collect()

    }

  },

  render() {

    return h('css-render-style', {

      innerHTML: this.style

    })

  }

})

const VitepressPath = defineComponent({

  setup() {

    const route = useRoute()

    return () => {

      return h('vitepress-path', null, [route.path])

    }

  }

})

const NaiveUIProvider = defineComponent({

  render() {

    return h(

      NConfigProvider,

      { abstract: true, inlineThemeDisabled: true },

      {

        default: () => [

          h(Layout, null, { default: this.$slots.default?.() }),

          import.meta.env.SSR ? [h(CssRenderStyle), h(VitepressPath)] : null

        ]

      }

    )

  }

})

export default {

  extends: DefaultTheme,

  Layout: NaiveUIProvider,

  enhanceApp: ({ app }) => {

    if (import.meta.env.SSR) {

      const { collect } = setup(app)

      app.provide('css-render-collect', collect)

    }

  }

}

```

### 2. Add this content to `.vitepress/config.mts`

```ts

import { defineConfig } from 'vitepress'

const fileAndStyles: Record = {}

export default defineConfig({

  // ...

  vite: {

    ssr: {

      noExternal: ['naive-ui', 'date-fns', 'vueuc']

    }

  },

  postRender(context) {

    const styleRegex = /((.|\s)+)<\/css-render-style>/

    const vitepressPathRegex = /(.+)<\/vitepress-path>/

    const style = styleRegex.exec(context.content)?.[1]

    const vitepressPath = vitepressPathRegex.exec(context.content)?.[1]

    if (vitepressPath && style) {

      fileAndStyles[vitepressPath] = style

    }

    context.content = context.content.replace(styleRegex, '')

    context.content = context.content.replace(vitepressPathRegex, '')

  },

  transformHtml(code, id) {

    const html = id.split('/').pop()

    if (!html) return

    const style = fileAndStyles[`/${html}`]

    if (style) {

      return code.replace(/<\/head>/, style + '')

    }

  }

})

```

### 3. Start using naive-ui in your markdown file

```md

...

import { NButton } from 'naive-ui'

Hello World

...

```