Migrate VuePress to Docus

Step 1. Make a copy of VuePress Folder
Step 2. Remove all files related to VuePress
Step 3. Run npx nuxi@latest init docs -t themes/docus
Step 3. Move all files from docs folder to root of the project
Step 4. Run npm install
Step 5. Run npm run dev
Step 7. Copy folders from your VuePress from src folder except the assets and .vuepress to the Docus's content folder
Step 8. Copy VuePress /src/assets folder in the public folder of Docus
Step 9. Open src/.vuepress/config.js from VuePress folder and rename Docus folder and files according to the sequence of config.js, you should add prefix number in the folder and files name as per the sequence.
Example:
src/.vuepress/config.js

sidebar: {
'/flutter/': [
        {
          title: 'Overview',
          children: [
            'brief',
            'introduction',
        },
'/nuxt/': [
        {
          title: 'Overview',
          children: [
            'guide',
            'setup',
        }
}

Then your folder names in docus should be

1.futter
   1.brief.md
   2.introduction.md
2.nuxt
   1.guide.md
   2.setup.md

Step 10. Update TOC
Replace

[[toc]]

with

---
toc: true
---

at the top of the file.

Step 11. Update Components
Replace

::: tip
example
:::

with

::alert{type="info"}
example
::

read more at: https://docus.dev/api/components
Step 12. Update Images
Replace

<img src="~@assets/flutter/cicd/preprod.png" width="300">

with

<img src="/assets/flutter/cicd/preprod.png" width="300">

Comments

[Michael Synan]

Out of curiosity - why do this? Is VuePress not sufficient for document sites?

[Pradeep Kumar]

@michaelsynan as you know Docus is built of Nuxt, hence we can do a lot of customization. In our case, we write a lot of private documentations and wanted to apply IP restriction. We found it extremely easy do it in Docus compare to VuePress. Also, we wanted to build some custom components as well.