Vue #

To install aFP Design System inside your Vue project you can use this command to add the corresponding package.

npm install @afp-design-system/vue

pnpm add @afp-design-system/vue @afp-design-system/core

Usage #

Import the required component to the desired location in your application. app.tsx example:

<script setup lang="ts">
  import { AfpButton } from '@afp-design-system/vue';

  function onButtonClicked() {
    console.log('Button clicked!');
  }
</script>

<template>
  <AfpButton :variant="'primary'" @afpClick="onButtonClicked">Click me!</AfpButton>
</template>

Event Handling #

Similar to the event handling from the chapter Usage, you can use Vue's event binding to listen to specific events. In the example above, we can see that a button is created, where the custom function @afpcClick is bound to a user defined function onClick.

Use default icons #

Alternatively, you can use the setAssetPath function.

Important: Without this step, access to the default Icon library is not possible. The output must be directed to /icons.

The icons from the core library need to be made available in the assets by Angular, depending on the project structure and compiler settings, which can vary from project to project. Here's an example for a Nx setup in the project.json:

{
  ...
  "options": {
    "assets": [
      {
        "glob": "*",
        "input": "node_modules/@afp-design-system/core/dist/icons",
        "output": "assets/icons"
      }
    ]
  }
  ...
}