powered by

Alokai integration with PlentyONE

Welcome to the PlentyONE integration for Alokai.

Development setup

This section describes how to run the project locally with the preconfigured demo system.

Fork repository

We recommend working with a fork of this repository. A fork allows you to easily incorporate updates from this boilerplate into your own codebase.

1. Create a fork.
2. Clone the forked repository.

Set up environment

Create an environment file under apps/web/.env. The minimum required configuration includes your PAT, the API endpoint of your PlentyONE system and the corresponding API security token:

# apps/web/.env

API_ENDPOINT=
API_SECURITY_TOKEN=

Download Node.js from the official website. We recommend using nvm to easily stay compatible with new versions. Then install all dependencies using NPM.

# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

# downloads and installs Node.js according to the project version in .nvmrc
nvm install

# downloads and installs NPM according to the project version, and downloads, installs, and builds all dependencies
npm install

Start the app

Run npm run dev to start the development server. The app will be served with hot reload at localhost:3000.

Code Generation

This project includes the PlentyONE Shop CLI for automated code generation. Use it to create consistent components, composables, and other files following project standards.

Available Generators

# Generate Vue components
npx plentyshop generate component

# Generate Vue composables
npx plentyshop generate composable

# See all available generators
npx plentyshop generate

Generated File Structures

Components (components/ComponentName/):

• ComponentName.vue - Main component file
• types.ts - TypeScript interfaces
• __tests__/ComponentName.spec.ts - Test file

Composables (composables/useFeatureName/):

• useFeatureName.ts - Main composable
• types.ts - TypeScript interfaces
• index.ts - Clean exports
• __tests__/useFeatureName.spec.ts - Test file

Quick Examples

# Create a new product card component
npx plentyshop generate component
# Enter: ProductCard

# Create a shopping cart composable
npx plentyshop generate composable
# Enter: useShoppingCart

The generators will create all necessary files with proper TypeScript types, test stubs, and follow the project's established patterns.

Custom Configuration

For custom project structures, configure the CLI in .plentyone/shop-cli.json:

{
  "webAppPath": "apps/web/app"
}

Or use CLI flags to override:

npx plentyshop generate component --web-app-path=src/app

Configuration priority: CLI flags > Config file > Defaults

Resources

Documentation

• Developers Documentation
• Technical Overview

Changelog

English | German

Features

• Turborepo remote cache build system, with blazingly fast execution of commands (build, lint, test etc.) on your local machine.
• TypeScript support.
• Nuxt.js 3 & Server Side Rendering for great UX, loading and SEO scores.
• Beautiful components built with TailwindCSS and Storefront UI - a lightweight, accessible, and customizable component library built for e-commerce.
• Unit tests with Vitest and Vue Test Utils.
• ESLint for code linting.
• Prettier code formatter.
• Husky for working with Git hooks efficiently.
• Conventional Commits standard for commit messages.
• Staged code linting with lint-staged.
• Progressive Web App features with Vite PWA for Nuxt.
• i18n localisation powered by Nuxt-i18n.
• Alokai SDK ready - integrate headless E-commerce platform with your project easily.
• Alokai Middleware.
• Maximized lighthouse score.

Alokai

• Introduction to learn what is Alokai.
• Alokai Documentation
• Storefront UI Documentation
• Community Chat

License

Distributed under the MIT License. See LICENSE for more information.

Contributing

Please see our CONTRIBUTING.md for more information.

Support

If you have any questions about this integration we will be happy to answer them on the plentymarkets channel of the Alokai Discord.