DPA shared components library

Collection of common Vue.js components for use in dpa projects.

• Changelog
• Contributing guidelines

Content

• Requirements
• Getting started
  • Integrate shared Tailwind preset
  • Set up code quality linting
  • Set up code formatting
• Usage

Requirements

• Node.js (see engines.node in package.json for compatible versions)
• The packages @eslint/js @tailwindcss/typography eslint prettier tailwindcss vue vue-router (see peerDependencies in package.json for compatible versions)

Getting started

1. Install the package.

   pnpm install @dpa-id-components/dpa-shared-components

2. Install the peer dependencies.

   pnpm install @tailwindcss/typography tailwindcss vue vue-router
   pnpm install --dev @eslint/js eslint prettier

   • Tailwind and its plugins are needed because the shared Tailwind preset uses them.
   • Vue.js and vue-router are needed because the shared components depend on them.
   • ESLint and Prettier are needed because we want to enforce code quality linting and formatting across projects.

3. Integrate the shared CSS and set up code quality linting and code formatting (see the following sections).

Integrate shared Tailwind preset

Reference the Tailwind preset from your CSS entrypoint (e.g. something like a main.css file).

@import "@dpa-id-components/dpa-shared-components/tailwindPreset";

@source "../../node_modules/@dpa-id-components/dpa-shared-components";
/* Make sure to adjust the `..` segments to match where the `node_modules` directory is. Tailwind won't produce an error if the path is wrong. */

/* … */

Set up code quality linting

A shared ESLint configuration is provided at @dpa-id-components/dpa-shared-components/config/eslint.config.js. Use it as a base configuration for code quality linting via ESLint.

Example ESLint configuration:

import sharedConfig from "@dpa-id-components/dpa-shared-components/config/eslint.config.js";
import { globalIgnores } from "eslint/config";

export default [
  {
    files: ["**/*.ts", "**/*.mts", "**/*.vue"],
  },

  globalIgnores(["**/dist/", "**/coverage/"]),

  ...sharedConfig,

  {
    settings: {
      "better-tailwindcss": {
        // The CSS entry point has to be manually configured in each host project.
        entryPoint: "src/assets/main.css",
      },
    },
  },

  {
    files: ["**/*.vue"],
    rules: {
      "vue/no-undef-components": [
        "error",
        {
          // Add globally-registered components here:
          ignorePatterns: ["i18n-t", "RouterLink", "RouterView"],
        },
      ],
    },
  },
];

Set up code formatting

A shared Prettier configuration is provided at @dpa-id-components/dpa-shared-components/config/prettier.config.js. Use it as a base configuration for code formatting via Prettier.

Example Prettier configuration:

import sharedConfig from "@dpa-id-components/dpa-shared-components/config/prettier.config.js";

/**
 * @see https://prettier.io/docs/configuration
 * @type {import("prettier").Config}
 */
export default {
  ...sharedConfig,
};

You might also want to add a Prettier ignore file (e.g. for ignoring Markdown files) and set up Prettier in your code editor to automatically format on save.

Usage

To use a component, import its source file directly:

import UiButton from "@dpa-id-components/dpa-shared-components/components/UiButton/UiButton.vue";