FDS Vue Core

FDS Vue Core is a Vue 3 component library that provides design tokens, icons, and components following Feelgood's digital design guidelines. It includes a comprehensive library of ready-made components such as form fields, buttons, blocks, tables, typography, modals, and more.

Installation

pnpm add fds-vue-core

Setup

Tailwind CSS Configuration

All components use Tailwind CSS. Configure Tailwind in your project:

tailwind.config.js:

import preset from 'fds-vue-core/tailwind.preset.cjs'

export default {
  presets: [preset],
  // Your other Tailwind configuration
}

style.css:

@import 'fds-vue-core/tokens.css';
@import 'tailwindcss';
@source '../node_modules/fds-vue-core';
@import 'fds-vue-core/slot-styles.css';
@import 'fds-vue-core/apply.css';
@import 'fds-vue-core/fonts.css';

Register Components

main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import FdsVueCore from 'fds-vue-core'
import i18n from './i18n'

const app = createApp(App)
app.use(i18n)
app.use(FdsVueCore, { i18n })
app.mount('#app')

If your app already installs Vue I18n globally, components can use that directly. Passing { i18n } to FdsVueCore additionally makes the i18n instance available via the provided FDS_VUE_CORE_I18N_KEY injection key for components/composables inside this library.

Usage

After registration, you can use components directly in your templates:

<template>
  <FdsButtonPrimary>Click me</FdsButtonPrimary>
  <FdsInput v-model="value" />
  <FdsTreeView :nodes="treeData" />
</template>

FdsWizard (Route-Based)

FdsWizard is a route-based step component. It only renders the step indicator and emits navigation; all data lives in the consumer. Listen to @go, call router.push({ name: payload.route.routeName, params, query }), and pass the current route name via activeRouteName (or rely on vue-router so the component reads currentRoute.name).

<script setup lang="ts">
import { ref } from 'vue'

const activeRouteName = ref('wizard-start')

const wizardRoutes = [
  { id: 'start', name: 'Start', routeName: 'wizard-start' },
  { id: 'details', name: 'Details', routeName: 'wizard-details' },
  { id: 'review', name: 'Review', routeName: 'wizard-review' },
]

const handleGo = (payload: { route: { routeName: string } }) => {
  activeRouteName.value = payload.route.routeName
}
</script>

<template>
  <FdsWizard :routes="wizardRoutes" :activeRouteName="activeRouteName" :completedTo="0" @go="handleGo">
    <template #default="{ currentRoute, currentStepIndex, nextStep, previousStep }">
      <p>Current step: {{ currentRoute?.name }}</p>
      <button @click="previousStep">Previous</button>
      <button @click="nextStep">Next</button>
    </template>
  </FdsWizard>
</template>

routes items: id, name, routeName (required); to, params, query (optional, for your router); disabled (optional).

Individual Component Import

You can also import specific components:

import { FdsButtonPrimary, FdsInput, FdsModal } from 'fds-vue-core'

TypeScript Support

All components are fully typed. Type definitions are included in the package.

Commit workflow

Use these commands to create commits with the shared Commitizen adapter and security dependency helper.

In this repo

pnpm commit
pnpm commit:vuln

• pnpm commit starts Commitizen prompts (configured via scripts/cz/cz-adapter.cjs).
• pnpm commit:vuln runs scripts/vuln-commit.mjs and auto-creates a vuln(...) commit from staged package.json dependency bumps.

In a consuming repo

Install dependencies:

pnpm add fds-vue-core
pnpm add -D commitizen

Add this to the consuming repo package.json:

{
  "scripts": {
    "commit": "cz",
    "commit:vuln": "fds-vuln-commit"
  },
  "config": {
    "commitizen": {
      "path": "fds-vue-core/cz-adapter"
    }
  }
}

Further Documentation

• Usage Guide - Detailed usage instructions
• Configuration Files - TypeScript, ESLint, Prettier, and VS Code configuration
• Storybook - Component API documentation and examples (run pnpm storybook)

Local development in another project (pnpm)

When you want to test fds-vue-core changes in another pnpm-based project without publishing to npm, use a local file: dependency instead of yalc:

In the consuming project, add the dependency pointing to your local checkout of fds-vue-core:

pnpm add file:../../fds-vue-core

Adjust the relative path so it points to this repo from your consuming project. After that:

• Run pnpm install in the consuming project as usual.
• Rebuild fds-vue-core when you change it (for example pnpm build in this repo), then restart or reload the consuming app if needed.

Note: yalc is not recommended together with pnpm in this setup; use pnpm add file:... instead.

Publish to npm

After you are done editing the fds-vue-core project you want to publish your changes in order to be able to access the changes in the projects that are using fds-vue-core.

1. Bump the version in package.json (Use the Semver set of rules for versioning).
2. Push your changes to github.
3. Publish the new version to npm: npm publish --access-public. (You might need to login: npm login)
4. Authenticate your account