Porsche Design System

Vue

Table of Contents

Global Theme
Prefixing

Global Theme#

Since v3.9.0 you can set the theme property for all child components by setting the prop on PorscheDesignSystemProvider.

Possible values for theme are: 'auto' | 'dark' | 'light' Local overrides on a per component basis are still possible as usual.

// pages/App.vue

<script setup lang="ts">
  import AppComponent from './components/AppComponent.vue';
  import { PorscheDesignSystemProvider } from '@porsche-design-system/components-vue';
</script>

<template>
  <PorscheDesignSystemProvider theme="dark">
    <AppComponent />
  </PorscheDesignSystemProvider>
</template>

Prefixing#

In case of a microservice architecture, multiple instances and versions of the Porsche Design System can be combined in a final application. This could cause conflicts due to the way how custom web components are registered in the browser. During the bootstrap phase of the Porsche Design System, custom elements are defined. If a second application wants to register Porsche Design System again it will cause issues especially when different versions are used.

A way of preventing those conflicts is by using a unique custom prefix for the components. Simply pass your desired prefix to the prefix property of PorscheDesignSystemProvider.

// pages/App.vue

<script setup lang="ts">
  import AppComponent from './components/AppComponent.vue';
  import { PorscheDesignSystemProvider } from '@porsche-design-system/components-vue';
</script>

<template>
  <PorscheDesignSystemProvider prefix="sample-prefix">
    <AppComponent />
  </PorscheDesignSystemProvider>
</template>

In the following example the PHeading component will render as <sample-prefix-p-heading>.

// AppComponent.vue

<script setup lang="ts">
  import { ref } from 'vue';
  import { PHeading } from '@porsche-design-system/components-vue';
</script>

<template>
  <PHeading>Heading</PHeading>
</template>