Exemple avec le module complet

Le module complet est le choix le plus simple lorsque vous voulez piloter les fonctionnalités depuis nuxt.config.ts.

Configuration Nuxt

import { fileURLToPath } from 'node:url'
import nfzNotionMarkdownEditor from '../../src/module'

export default defineNuxtConfig({
  compatibilityDate: '2026-05-01',

  modules: [nfzNotionMarkdownEditor],

  nfzNotionMarkdownEditor: {
    features: {
      tables: true,
      media: true,
      uml: true,
      filerobot: true,
      documentImportExport: true,
      markdownPreview: true,
      sourceMode: true
    },
    license: {
      enabled: true,
      edition: 'complete',
      productId: 'nfz-notion-markdown-editor',
      licenseEdition: 'pro',
      planKey: 'notion-editor-pro',
      productDomain: 'docs.example.org',
      componentId: 'nfz-notion-markdown-editor',
      hostApp: 'standalone',
      serverUrl: 'https://licence.nfz-serveur.fr',
      validateEndpoint: '/api/license/verify',
      requestEndpoint: '/api/license/request',
      enforce: 'warn'
    },
    quasar: {
      lang: 'fr',
      plugins: ['Dialog', 'Notify', 'Loading'],
      dark: 'auto'
    }
  },


  runtimeConfig: {
    nfzNotionMarkdownEditorLicense: {
      licenseKey: process.env.NFZ_NOTION_EDITOR_LICENSE_KEY || '',
      tenantId: process.env.NFZ_TENANT_ID || 'docs-example-org',
      productDomain: process.env.NFZ_PRODUCT_DOMAIN || 'docs.example.org',
      customerEmail: process.env.NFZ_CUSTOMER_EMAIL || ''
    }
  },

  css: ['~/assets/css/main.css'],

  alias: {
    '#nfz-editor-types': fileURLToPath(
      new URL('../../app/types/nfz-notion-markdown-editor.ts', import.meta.url)
    )
  },

  typescript: {
    strict: true,
    typeCheck: false
  }
})

Page contenant l’éditeur

<script setup lang="ts">
import { ref } from 'vue'
import type { NfzEditorSavePayload, NfzToolbarItemId } from '#nfz-editor-types'

const toolbar: NfzToolbarItemId[] = [
  'bold',
  'italic',
  'heading-2',
  'bullet-list',
  'table',
  'image',
  'uml',
  'markdown-preview',
  'save'
]

const markdown = ref(`# Module Nuxt NFZ Notion Markdown Editor

Cette page utilise le module \`src/module.ts\`, pas le mode \`extends\`.

| Élément | Statut |
| --- | --- |
| Module Nuxt | OK |
| Tables | OK |
| UML | OK |

\`\`\`mermaid
sequenceDiagram
  User->>Editor: Édite
  Editor->>NuxtModule: Charge runtime
\`\`\`
`)

const lastSave = ref<NfzEditorSavePayload | null>(null)

function handleSave(payload: NfzEditorSavePayload): void {
  lastSave.value = payload
}
</script>

<template>
  <main class="module-page" data-testid="fresh-module-editor-page">
    <section class="module-card">
      <p class="eyebrow">Nuxt module mode</p>
      <h1>Éditeur via defineNuxtModule</h1>
      <p>
        Ce scénario valide l’intégration progressive via <code>modules</code>
        tout en gardant le mode layer historique.
      </p>
    </section>

    <NfzNotionMarkdownEditor
      v-model="markdown"
      :toolbar="toolbar"
      :enable-markdown-preview="true"
      :enable-filerobot-image-editor="true"
      @save="handleSave"
    />

    <pre v-if="lastSave" data-testid="fresh-module-save-summary">{{ {
      markdownLength: lastSave.markdown.length,
      htmlLength: lastSave.html.length
    } }}</pre>
  </main>
</template>

Commencez avec ce profil si vous avez besoin des médias, tableaux, diagrammes, import/export, aperçu et mode source.