Design Systems Team/Vue and Codex for non-Developers

What is Vue?
Vue (pronounced "view") is a JavaScript framework for building user interfaces.

What is Codex?
Codex is a design system for Wikimedia that is aligned with the Wikimedia Design Style Guide.

Codex is a layer - actually, several layers - on top of Vue that provides:


 * 1) Out-of-the-box, interactive components that you can use on your page (e.g., button, dialog, menu). Some components are also available in a CSS-only version for use in no-JavaScript contexts.
 * 2) Standardized colors, shadows, spacing values, backgrounds, borders, and paddings, called design tokens. These are the smallest building blocks of the design system: they define, document and enable the application of systemic design decisions at scale.
 * 3) Icons, which can be used to convey actions or other information visually.

What is the difference between Vue and Codex?
You can build features in Vue without using Codex; however, the Design Systems team encourages teams to use Codex and recommends against teams building their own components. We ask that you use Codex components where possible, and build your own components as “one-offs” where Codex doesn't have what you need yet. Those components could then be upstreamed (moved into Codex) in the future.

What is Pinia?
[explain state management, and how Pinia helps with it]

What are long-term benefits of adopting Vue/Codex?
While adopting Vue or Codex might mean more time spent on learning and experimenting during design and development, and longer project timelines, the long-term benefits are:


 * Less feature redundancy
 * Consistent user experience across all Wikimedia projects
 * Accessible and multilingual by default
 * Standardized browser and device support
 * Faster onboarding
 * Faster software upgrades
 * Systems thinking: teams make an impact outside of immediate focus area

Is my project is a good fit for Vue/Codex (whether starting from scratch, or migrating from another library)?
As an initial guide to making this decision, review the project with your team's engineers against the following criteria: