PDK Frontend

Latest version of @myparcel/pdk on npm
myparcelnl/js-pdk issues on GitHub
myparcelnl/js-pdk pull requests on GitHub

The frontend part of the PDK uses Vue.js 3 and provides certain components you can render in your application. It supports custom components, so you can style everything yourself.


  • Node.js 18 or higher (May work on lower versions, but not tested)
  • Vue.js 3 or higher
  • TypeScript 4.5 or higher

Project structure

The PDK frontend works best in a Yarn 2 workspace. Example workspace structure:

├── package.json
└── views
    ├── admin
    │   └── package.json
    ├── checkout-core
    │   └── package.json
    ├── checkout-delivery-options
    │   └── package.json
    ├── checkout-separate-address-fields
    │   └── package.json
    └── checkout-tax-fields
        └── package.json

With this being the root package.json:

  "name": "@my-scope/monorepo",
  "private": true,
  "workspaces": ["views/*"]


The admin is the main component of the JS PDK. It contains all the logic to communicate with the PDK backend and to render components in your app's backend.

It uses the following libraries:

  • vue^3
  • pinia
  • @vueuse/core
  • @tanstack/vue-query

Set up the admin

Continue reading on how to set up the admin


The checkout part of the JS PDK is split up into multiple packages. This allows you to only use the parts you need and minimize bundle size. Only the delivery options component uses external libraries. The other components are written in pure JavaScript (TypeScript).

Set up the checkout

Continue reading on how to set up the checkout

Edit this page
Last updated: 
Contributors Freek van Rijt