fds-vue-core

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.

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