@wikimedia/codex

Codex is a toolkit for building user interfaces within the Wikimedia Design System. Codex contains: - Vue components, in this package - Icons, in the @wikimedia/codex-icons package

Usage no npm install needed!

<script type="module">
  import wikimediaCodex from 'https://cdn.skypack.dev/@wikimedia/codex';
</script>

README

Codex

Codex is a toolkit for building user interfaces within the Wikimedia Design System. Codex contains:

  • Vue components, in this package
  • Icons, in the @wikimedia/codex-icons package

For more details, read the Codex documentation.

Using Codex components

To use a component, import it from this package:

// If using ES modules:
import { CdxButton } from '@wikimedia/codex';

// or, if using CommonJS:
const { CdxButton } = require( '@wikimedia/codex' );

then pass it into the components option of your Vue component:

<template>
    <div>
        <cdx-button action="progressive" type="primary">
            Click me!
        </cdx-button>
    </div>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxButton } from '@wikimedia/codex';

export default defineComponent( {
    components: {
        CdxButton
    },
    // ...
} );
</script>