Vanilla Js
Table of Contents
Quick start#
To build your own (non framework specific) application with Native Web Components of the Porsche Design System,
follow these steps:
Follow the instructions at Introduction to get the required npm package
Install the Porsche Design System
npm install @porsche-design-system/components-js
yarn add @porsche-design-system/components-js
Integration#
After adding the @porsche-design-system/components-js package to your project, the following page setup is recommended
(assuming a web server is running).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Porsche Design System</title>
<script src="PATH/TO/PACKAGE/@porsche-design-system/components-js/index.js"></script>
</head>
<body>
<script type="text/javascript">
porscheDesignSystem.load();
</script>
<p-heading>Welcome to Vanilla JS</p-heading>
</body>
</html>
Now, when you look at the result in your browser you should see an error message like
"The Porsche Design System is used without using the getInitialStyles() partial."
To fix this, you have to apply the getInitialStyles() partial which is mandatory since v3.7.0.
When are Porsche Design System components initialized?#
See componentsReady() for further information.
How do Porsche Design System components work in detail?#
See Initialization for further information.
Sample integration#
We provide a public GitHub repository with a basic sample project setup to show how it is managed in real code.
You can find the repository of the Vanilla-JS example project here:
Sample integration Vanilla-JS
Get the project up and running
Clone the repository by executing
git clone https://github.com/porsche-design-system/sample-integration-vanillajs.git
Follow the installation guidelines in the README.md file
