Documentation Index
Fetch the complete documentation index at: https://mintlify.com/shopware/meteor/llms.txt
Use this file to discover all available pages before exploring further.
Get started with Meteor by installing your first component and creating a simple Vue application.
Install the Component Library
Install the Meteor component library using your preferred package manager:npm install @shopware-ag/meteor-component-library
Import Styles
Import the component library styles in your main application file:import '@shopware-ag/meteor-component-library/dist/style.css';
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>
Run Your Application
Start your development server and view your application: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';
.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.