Porsche Design System

Astro

Table of Contents

Quick start
Integration

Quick start#

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

astro@5

vue@3

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

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

# Follow the installation wizard to set everything up:
✔ Where should we create your new project?: "./my-app"
✔ How would you like to start your new project?: "A basic, helpful starter project"
✔ Install dependencies?: "No"
✔ Initialize a new git repository?: "Yes"

# Add Vue as JS framework:
npx astro add vue

# Follow the installation wizard to set everything up:
✔ Astro will make the following changes to your config file: "Yes"
✔ Astro will make the following changes to your tsconfig.json: "Yes"

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-js

Step 2

Integrate the Porsche Design System Loader.

// src/layouts/Layout.astro

---
+ import { getLoaderScript } from '@porsche-design-system/components-js/partials';
---
<!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro Basics</title>
  </head>
  <body>
    <slot />
+   <Fragment set:html={getLoaderScript()} />
  </body>
</html>

Step 3

Configure astro.config.mjs to support Porsche Design System Components in Vue.

// astro.config.mjs

import vue from '@astrojs/vue';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [
+   vue({
+     template: {
+       compilerOptions: {
+         isCustomElement: (tag) => {
+           return tag.startsWith('p-');
+         },
+       },
+     },
+   }),
  ],
});

Step 4 (recommended)

Integrate Porsche Design System Partials to boost performance, reduce loading times, and minimize FOUC/FOUT.

// src/layouts/Layout.astro

---
+ import { getComponentChunkLinks, getFontFaceStyles, getFontLinks, getIconLinks, getInitialStyles, getLoaderScript, getMetaTagsAndIconLinks } from '@porsche-design-system/components-js/partials';
---
<!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro Basics</title>
    <!-- injects stylesheet which defines visibility of pre-hydrated PDS components -->
+   <Fragment set:html={getInitialStyles()} />
    <!-- injects stylesheet which defines Porsche Next CSS font-face definition (=> minimize FOUT) -->
+   <Fragment set:html={getFontFaceStyles()} />
    <!-- preloads Porsche Next font (=> minimize FOUT) -->
+   <Fragment set:html={getFontLinks()} />
    <!-- preloads PDS component core chunk from CDN for PDS component hydration (=> improve loading performance) -->
+   <Fragment set:html={getComponentChunkLinks()} />
    <!-- preloads Porsche icons (=> minimize FOUC) -->
+   <Fragment set:html={getIconLinks()} />
    <!-- injects favicon, apple touch icons, android touch icons, etc. -->
+   <Fragment set:html={getMetaTagsAndIconLinks({ appTitle: 'Porsche' })} />
  </head>
  <body>
    <slot />
    <Fragment set:html={getLoaderScript()} />
  </body>
</html>

Step 5

Add a Porsche Design System component (e.g., <p-wordmark></p-wordmark>). Then, run npm run dev and verify that the component display correctly.

Create a new Vue component, e.g. Welcome.vue.

// src/components/Welcome.vue

<template>
  <div class="welcome">
    <p-text>Astro + Vue</p-text>
    <p-wordmark />
  </div>
</template>

<style scoped>
  .welcome {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin-block: 16px;
  }
</style>

Integrate Welcome.vue to pages.

---
import Welcome from '../components/Welcome.astro';
+ import WelcomeVue from '../components/Welcome.vue';
import Layout from '../layouts/Layout.astro';
---

<Layout>
+ <WelcomeVue />
  <Welcome />
</Layout>