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.vue 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, a button is created where @afpClick is bound to the onButtonClicked function.

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 your bundler, 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"
      }
    ]
  }
  ...
}