Meteor component library

The meteor component library is a Vue component library developed by Shopware. It is based on the Meteor Design System.

• Perfect suitable for Shopware Apps
• Matches the Shopware administration look and feel
• Small bundle sizes with tree-shaking
• Tested and previewed with Storybook, documented on meteor.shopware.com

Requirements

You need a working Vue 3 application with the i18n plugin for the translations. The main translations (English and German) are bundled in the components. For other languages you need to add the snippets for the correct paths.

Installation

Add these packages to your project:

npm i @shopware-ag/meteor-component-library vue-i18n

Import the style.css for general styling and font.css for the Inter font in the root file of your application or in you root styling file.

import "@shopware-ag/meteor-component-library/styles.css";
import "@shopware-ag/meteor-component-library/font.css";

Now, configure the i18n plugin for Vue.

const i18n = createI18n({
  legacy: false,
});

app.use(i18n);

Each component works independently and can be imported directly from the root like this:

<script>
  import { MtButton } from "@shopware-ag/meteor-component-library";

  export default {
    components: {
      "mt-button": MtButton,
    },
  };
</script>

Development

These guides are useful if you want to contribute this component library.

Project setup

pnpm install

Compiles and hot-reloads for development

pnpm run storybook

To run Storybook and the documentation site together, use pnpm dev from the repository root instead. See the contribution guidelines for details.

Compiles and minifies for production

pnpm run build:storybook

Run your interaction tests (running Storybook instance is needed)

pnpm run test:storybook

Lints and fixes files

pnpm run lint:all

Build the bundled component library

pnpm run build

Writing interaction tests

All interaction tests are written in component-name.interactive.stories.js files. The title needs to be prefixed with Interaction Tests/. These interaction tests are hidden in the final build but are visible in the Storybook development watcher.

Example:

import meta from "./mt-button.stories";

export default {
  ...meta,
  title: "Interaction Tests/base/mt-button",
  component: MtButton,
};

Writing visual tests

Stories for visual tests need to start with VisualTest.

Example:

export const VisualTestPrimaryVariant = {
  name: "Render the primary variant",
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    // your interaction test ...
  },
};

The screenshot will be generated at the end of the Play function. If no Play function is defined then it will be created immediately.

For reduced flakiness all animations are automatically disabled from Playwright.