Skip to content

v4.0.0

Choose a tag to compare

@larbish larbish released this 25 Jul 15:07
· 240 commits to main since this release

🎉 Docus v4

Even though Docus v3 was a recent release, moving to the native Nuxt CLI in v4 allows us to benefit from its performance improvements and ongoing enhancements. The only breaking changes are related to how you run and build your documentation projects.

⚡Native Nuxt CLI Integration

Docus v4 transitions from a custom CLI tool to a Nuxt layer-based approach that leverages the official Nuxt CLI (nuxi).

  • Monorepo structure: The main Docus repository is now a monorepo containing two packages:
    • docus: The Nuxt layer you add to your project for docs features and UI.
    • create-docus: The CLI tool to create new Docus projects (replaces the previous CLI).
  • Nuxt 4 compatibility: Support for Nuxt 4.
  • Flexible templates: Choose between default and i18n starter templates with the -t flag when creating a new project (more details below about i18n).

Usage

# ✅ New way (v4)
npx create-docus my-docs
cd my-docs
npm run dev

# ❌ Old way (v3)
npx docus init my-docs

Generated project (no changes)

my-docs/
├── content/              # Your markdown content
│   ├── index.md         # Homepage
│   └── docs/            # Documentation pages
├── public/              # Static assets
└── package.json         # Dependencies and scripts

You can still use any feature or file of a classical Nuxt project:

my-docs/
├── app.config.ts        # App configuration
├── nuxt.config.ts       # Nuxt configuration (add extra modules, components, etc.)
├── app/                 # App directory
│   ├── components/      # Components (add your own components)
│   ├── layouts/         # Layouts (add your own layouts)
│   └── pages/           # Pages (add your own pages)
└── server/              # Server-side code (add your own server-side code)

🌍 I18N Integration

Docus v4 introduces native internationalization support based on the @nuxtjs/i18n module

  • Built-in i18n module: Native integration with @nuxtjs/i18n
  • Dynamic locale routing: Automatic URL prefixing with language codes (/en/docs, /fr/docs)
  • Content collections per locale: Separate content management for each language
  • Language switcher: Built-in component for switching between locales

Content Organization

With i18n:

content/
├── en/
│   ├── index.md
│   └── docs/
│       └── getting-started.md
├── fr/
│   ├── index.md
│   └── docs/
│       └── getting-started.md

Without i18n:

content/
├── index.md
└── docs/
    └── getting-started.md

Configuration

Tip

The only thing you need to do to enable i18n is to add it in your nuxt.config.ts and define the locales in the i18n configuration.

Docus will automatically generate the content collections based on the locales defined in the i18n configuration and will use your content architecture to generate the routing.

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    defaultLocale: 'en',
    locales: [
      { code: 'en', name: 'English' },
      { code: 'fr', name: 'Français' }
    ],
  }
})

⚠️ Breaking Changes

CLI Command Changes

v3 v4
npx docus init my-docs npx create-docus my-docs
npx docus dev nuxt dev --extend docus
npx docus build nuxt build --extend docus

Note

It's even recommanded to directly extend the Docus layer in your nuxt.config.ts with extends: ['docus'] instead of using the CLI commands but both will work.

Full Changelog: v3.0.5...v4.0.0