Porsche Design System

Vue

Table of Contents

Quick start
Integration

Quick start#

To build a Vue application using the Porsche Design System, follow these steps. This guide is based on the following dependencies:

vue@3

tailwindcss@4

@porsche-design-system/components-vue@3

# Create a new application by executing:
npm create vue@latest

# Follow the installation wizard to set everything up:
✔ Project name (target directory): "./my-app"
✔ Select features to include in your project:
    ◼ TypeScript "Yes"
    ◼ JSX Support "Yes"
    ◼ Router (SPA development) "Yes"
    ◼ Pinia (state management) "Yes"
    ◼ Vitest (unit testing) "Yes"
    ◼ End-to-End Testing "Yes"
    ◼ ESLint (error prevention) "Yes"
    ◼ Prettier (code formatting) "Yes"
✔ Select an End-to-End testing framework: "Playwright"
✔ Select experimental features to include in your project:
    ◻ Oxlint (experimental) "No"
    ◻ rolldown-vite "No"
✔ Skip all example code and start with a blank Vue project? "No"

You're all set! Start building your own application now.

Integration#

Step 1

Install the Porsche Design System within your project directory.

npm install @porsche-design-system/components-vue

Step 2

Wrap your app with the <PorscheDesignSystemProvider />.

// src/App.vue

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

<template>
  <PorscheDesignSystemProvider>
    <header>…</header>
    <RouterView />
  </PorscheDesignSystemProvider>
</template>

<style scoped>
  …
</style>

Step 3 (recommended)

To boost your web application's performance and minimize issues like FOUC (Flash of Unstyled Content) and FOUT (Flash of Unstyled Text), you can integrate Partials from the Porsche Design System into the <head> section of your HTML.

// vite.config.ts

import …
import { defineConfig } from 'vite';
import {
  getComponentChunkLinks,
  getFontFaceStyles,
  getFontLinks,
  getIconLinks,
  getInitialStyles,
  getMetaTagsAndIconLinks,
} from '@porsche-design-system/components-vue/partials';

const transformIndexHtmlPlugin = () => {
  return {
    name: 'html-transform',
    transformIndexHtml(html: string) {
      const headPartials = [
        // injects stylesheet which defines visibility of pre-hydrated PDS components
        getInitialStyles(),
        // injects stylesheet which defines Porsche Next CSS font-face definition (=> minimize FOUT)
        getFontFaceStyles(),
        // preloads Porsche Next font (=> minimize FOUT)
        getFontLinks(),
        // preloads PDS component core chunk from CDN for PDS component hydration (=> improve loading performance)
        getComponentChunkLinks(),
        // preloads Porsche icons (=> minimize FOUC)
        getIconLinks(),
        // injects favicon, apple touch icons, android touch icons, etc.
        getMetaTagsAndIconLinks({ appTitle: 'Porsche' }),
      ].join('');

      return html.replace(/<\/head>/, `${headPartials}$&`);
    },
  };
};

export default defineConfig({
  plugins: [vue(), vueJsx(), vueDevTools(), transformIndexHtmlPlugin()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

Step 4 (recommended)

Setting up Tailwind CSS with the Porsche Design System Tailwind CSS Theme allows you to use a utility-first CSS framework that guarantees seamless styling consistency with Porsche's design principles.

The Key Advantage: Universal Code Sharing & Scalability

Using Tailwind CSS with the Porsche Design System Theme provides a powerful benefit: Your styles are truly framework-agnostic. Since Tailwind generates atomic utility classes, you eliminate cascading style issues, promoting long-term scalability and maintainability for large projects. The patterns and components you build are easily portable. You can copy and paste the same styling code between projects, teams, and different technology stacks (React, Angular, Vue, plain HTML, etc.), ensuring 100% visual uniformity across the organization. You can now use and customize the provided Patterns and Templates, which are all written in Tailwind CSS, to build applications quickly and efficiently.

Install Tailwind CSS within your project directory.

npm install tailwindcss @tailwindcss/vite

Configure the Vite Tailwind CSS plugin.

// vite.config.ts

import …
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

const transformIndexHtmlPlugin = () => { … }

export default defineConfig({
  plugins: [vue(), vueJsx(), vueDevTools(), transformIndexHtmlPlugin(), tailwindcss()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

Import Tailwind CSS and the Porsche Design System Tailwind CSS Theme.

/* src/assets/main.css */

@import 'tailwindcss';
@import '@porsche-design-system/components-vue/tailwindcss';

Step 5

Add a Porsche Design System component (e.g., <PWordmark />) with some Tailwind CSS styles. Then, run npm run dev and verify that the component and styles display correctly.

// src/App.vue

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

<template>
  <PorscheDesignSystemProvider>
    <div class="grid justify-items-center col-span-full gap-fluid-md m-static-lg p-fluid-lg bg-surface rounded-lg">
      <PWordmark />
      <h1 class="prose-display-md">Porsche Design System</h1>
    </div>
    <header>…</header>
    <RouterView />
  </PorscheDesignSystemProvider>
</template>

<style scoped>
  …
</style>