Skip to main content
Get started with Meteor by installing your first component and creating a simple Vue application.
1

Install the Component Library

Install the Meteor component library using your preferred package manager:
npm install @shopware-ag/meteor-component-library
2

Import Styles

Import the component library styles in your main application file:
import '@shopware-ag/meteor-component-library/dist/style.css';
3

Create Your First Component

Create a simple Vue component using Meteor components:
<template>
  <div class="container">
    <MtCard title="Welcome to Meteor">
      <p>Get started with Shopware's design system</p>
      
      <MtTextField
        v-model="name"
        label="Your name"
        placeholder="Enter your name"
      />
      
      <MtButton variant="primary" @click="greet">
        Say Hello
      </MtButton>
      
      <MtBanner v-if="greeting" variant="success">
        {{ greeting }}
      </MtBanner>
    </MtCard>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { MtCard, MtTextField, MtButton, MtBanner } from '@shopware-ag/meteor-component-library';

const name = ref('');
const greeting = ref('');

const greet = () => {
  greeting.value = `Hello, ${name.value || 'World'}!`;
};
</script>

<style scoped>
.container {
  padding: 2rem;
  max-width: 600px;
  margin: 0 auto;
}
</style>
4

Run Your Application

Start your development server and view your application:
npm run dev
Your application should now be running with Meteor components!

​
What’s Next?

Component Library

Explore all available Vue components

Design Tokens

Learn about theming and customization

Icon Kit

Browse the icon library

Installation Guide

View detailed installation instructions

​
Using Design Tokens

Want to customize the appearance? Import and use design tokens: 
import '@shopware-ag/meteor-tokens/primitives.css';
import '@shopware-ag/meteor-tokens/administration/light.css';
Now you can use token variables in your CSS: 
.custom-element {
  color: var(--color-text-primary);
  background: var(--color-background-primary);
  padding: var(--spacing-16);
  border-radius: var(--border-radius-default);
}

​
Using Icons

Add icons to your application: 
<template>
  <MtIcon name="heart" size="24" />
</template>

<script setup>
import { MtIcon } from '@shopware-ag/meteor-component-library';
</script>
For a complete working example, check out the Nuxt example in the GitHub repository.

Build docs developers (and LLMs) love

Get started for freeTalk to us