Installation

This design system consists of a Vue component library for composing powerful enhancing and consistent UIs that meet the corporate design patterns of PohlCon GmbH.

Furthermore, our design system provides utility functions that can be used inside of a Vue project that adjust functionalities to our needs and/or standards, i.e. for using the well-known vue-i18n dependency.

Since our design system is published in a private npm registry, firstly you have to define, where npm can find this registry. You do so by adding a .npmrc file to the root of your project.

@pohlcon:registry=https://pkgs.dev.azure.com/PohlCon/_packaging/PohlCon/npm/registry/                       
registry=https://registry.npmjs.org
always-auth=true

Now you should be able to install the @pohlcon/design-system package via

npm i -D @pohlcon/design-system

Please make sure that you have all the required peerDependencies with their corresponding minimum versions installed, also.

json

"peerDependencies": {
  "vue": "^3.5.12",
  "vue-router": "^4.1.3",
  "vue-i18n": "^9.9.1",
  "sass": "^1.69.7"
}

After successfully installing the package, you need to import the style.css file into your project. This injects all our CSS variables (i.e. gutters, colors, font-faces) into the HTML's :root.

// main.ts

import '@pohlcon/design-system/style.css'

Our design system is also based on root sizes and themes. We handle those via a special dedicated component called TheAppWrapper. You need to wrap your entire application into this component.

Please refer to the components documentation for further information about its configuration.

// App.vue

<script setup lang="ts">
import { TheAppWrapper } from '@pohlcon/design-system';

import Welcome from './views';
</script>

<template>
  <TheAppWrapper size="medium">
    <Welcome />
    ...
  </TheAppWrapper>
</template>

<style lang="scss">
@use '@pohlcon/design-system/index.scss' as *;

.btn {
  @include glass-blur-1-with-shadow;
}
</style>

Please note that you also have to import the index.scss file inside of the App.vue component, once. So you'll have the typography definitions available throughout your whole application.

There are some scss mixins available, too that will be available by importing index.scss file into the corresponding style section of your App.vue component, as shown above. Then you are able to use them according to scss' official documentation.

From here on you are able to use the component library by importing the corresponding components into your Vue component and use them accordingly:

// Welcome.vue

<script setup lang='ts'>
import { Heading, AppButton } from '@pohlcon/design-system';
</script>

<template>
  <Heading :level="1">Welcome to our Design System!</Heading>
  <AppButton :text="'Click me'" :icon="'home'" @click="console.log('Thanks for using our design system!')" />
</template>

Installation ​

​

Installation