Skip to main content

​
Installation

The Meteor Admin SDK (@shopware-ag/meteor-admin-sdk) can be installed and used in multiple ways depending on your project setup. This guide covers all installation methods and module formats.

​
NPM Installation

For projects using a build tool (webpack, Vite, Rollup, etc.), install the SDK via npm: 
npm install @shopware-ag/meteor-admin-sdk
Or using other package managers: 
yarn add @shopware-ag/meteor-admin-sdk

​
Package Information

Package name: @shopware-ag/meteor-admin-sdk
Current version: 6.5.1
License: MIT
Repository: github.com/shopware/meteor

​
Module Formats

The Admin SDK is distributed in multiple module formats to support different use cases:

​
ES Modules (Recommended)

ES modules are the recommended format for modern JavaScript projects. They provide the best tree-shaking support, keeping your bundle size minimal. 
// Import everything
import * as sw from '@shopware-ag/meteor-admin-sdk';

// Import specific modules (recommended for smaller bundles)
import { notification, ui, data } from '@shopware-ag/meteor-admin-sdk';

// Import only what you need
import { notification } from '@shopware-ag/meteor-admin-sdk';
Module entry point: es/index.js

​
UMD Modules

UMD (Universal Module Definition) modules work in both Node.js and browser environments. 
const sw = require('@shopware-ag/meteor-admin-sdk');

sw.notification.dispatch({
  title: 'Hello',
  message: 'UMD module loaded'
});
Module entry point: umd/index.js

​
CDN Usage

For quick prototyping or simple projects without a build step, use the CDN version: 
<!-- Latest version -->
<script src="https://unpkg.com/@shopware-ag/meteor-admin-sdk/cdn"></script>

<!-- Specific version (recommended for production) -->
<script src="https://unpkg.com/@shopware-ag/meteor-admin-sdk@6.5.1/cdn"></script>
After loading the script, the SDK is available via the global sw variable: 
sw.notification.dispatch({
  title: 'Hello from CDN',
  message: 'This is using the CDN version'
});

​
Setup in Different Environments

​
Vanilla JavaScript

For a simple HTML/JavaScript setup: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Admin App</title>
  <script src="https://unpkg.com/@shopware-ag/meteor-admin-sdk/cdn"></script>
</head>
<body>
  <div id="app"></div>
  
  <script>
    // SDK is available as global 'sw' variable
    sw.notification.dispatch({
      title: 'App Loaded',
      message: 'Your app is ready!'
    });

    sw.ui.menu.addMenuItem({
      label: 'My App',
      locationId: 'my-app-location'
    });
  </script>
</body>
</html>

​
Modern JavaScript with Modules

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Admin App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module">
    import { notification, ui } from 'https://unpkg.com/@shopware-ag/meteor-admin-sdk/es/index.js';
    
    notification.dispatch({
      title: 'Module Loaded',
      message: 'Using ES modules!'
    });
  </script>
</body>
</html>

​
TypeScript Projects

The SDK includes full TypeScript definitions: 
import { notification, ui, data } from '@shopware-ag/meteor-admin-sdk';
import type { NotificationOptions } from '@shopware-ag/meteor-admin-sdk';

const notifyUser = (options: NotificationOptions): void => {
  notification.dispatch(options);
};

notifyUser({
  title: 'TypeScript',
  message: 'Full type safety included!',
  variant: 'success'
});
Types entry point: es/index.d.ts

​
Vue.js Projects

Example setup for Vue 3 applications: 
import { createApp } from 'vue';
import { location } from '@shopware-ag/meteor-admin-sdk';
import App from './App.vue';

if (location.is(location.MAIN_HIDDEN)) {
  // Initialize extensions
  import('./extensions/init-app.js');
} else {
  // Render the app
  const app = createApp(App);
  app.mount('#app');
}

​
React Projects

import React from 'react';
import ReactDOM from 'react-dom';
import { location } from '@shopware-ag/meteor-admin-sdk';
import App from './App';

if (location.is(location.MAIN_HIDDEN)) {
  // Initialize extensions
  import('./extensions/init-app.js');
} else {
  // Render the app
  ReactDOM.render(<App />, document.getElementById('app'));
}

​
Granular Imports

The SDK supports granular imports for specific modules, which can further reduce bundle size: 
// Import only the data module
import * as data from '@shopware-ag/meteor-admin-sdk/es/data';

// Import only the location utilities
import * as location from '@shopware-ag/meteor-admin-sdk/es/location';

// Import the Criteria class
import { Criteria } from '@shopware-ag/meteor-admin-sdk/es/data/Criteria';

// Import repository functionality
import * as repository from '@shopware-ag/meteor-admin-sdk/es/data/repository';

​
Available Module Paths

Here are the main module paths available for granular imports:
  • @shopware-ag/meteor-admin-sdk/es/channel - Communication channel
  • @shopware-ag/meteor-admin-sdk/es/data - Data handling
  • @shopware-ag/meteor-admin-sdk/es/data/Criteria - Query builder
  • @shopware-ag/meteor-admin-sdk/es/data/repository - Repository pattern
  • @shopware-ag/meteor-admin-sdk/es/data/composables - Vue 3 composables
  • @shopware-ag/meteor-admin-sdk/es/location - Location utilities

​
Verification

To verify your installation is working correctly, try this simple test: 
import { notification } from '@shopware-ag/meteor-admin-sdk';

notification.dispatch({
  title: 'Installation Successful',
  message: 'The Admin SDK is ready to use!',
  variant: 'success'
});
If you see the notification in the Shopware Administration, your installation is complete!

​
Dependencies

The Admin SDK has minimal production dependencies:
  • jwt-decode (^4.0.0) - For handling JWT tokens
  • localforage (^1.10.0) - For local storage management
  • lodash-es (^4.17.21) - Utility functions
  • semver (^7.7.1) - Version comparison
All dependencies are bundled in the CDN version, so no additional setup is required when using the CDN.

​
Next Steps

Quickstart Tutorial

Build your first admin app with the SDK

Core Concepts

Learn about locations, iframes, and communication patterns

API Reference

Explore the complete API documentation

Example App

View a complete example application

​
Troubleshooting

If you see module resolution errors:
  • Ensure the package is installed: npm list @shopware-ag/meteor-admin-sdk
  • Clear your node_modules and reinstall: rm -rf node_modules && npm install
  • Check your bundler configuration for proper ES module support
If TypeScript can’t find type definitions:
  • Verify the package includes types: es/index.d.ts should exist
  • Ensure your tsconfig.json has "moduleResolution": "node"
  • Try restarting your TypeScript server
If the CDN version doesn’t work:
  • Check your browser console for CORS errors
  • Verify the CDN URL is correct and accessible
  • Try using a specific version instead of latest
  • Ensure your browser supports ES modules if using module imports

Build docs developers (and LLMs) love

Get started for freeTalk to us