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

yarn add fds-vue-core

Peer Dependencies

Make sure you have the required peer dependencies installed:

yarn add vue@^3.5.0

Postinstall Script

To automatically sync VS Code settings when installing or updating fds-vue-core, add this to your package.json:

{
  "scripts": {
    "sync:vscode:settings": "node node_modules/fds-vue-core/scripts/sync-vscode-settings.mjs || true",
    "postinstall": "yarn sync:vscode:settings"
  }
}

This will automatically sync VS Code settings after every yarn install. The || true ensures the install doesn't fail if the script encounters any issues.

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'

const app = createApp(App)
app.use(FdsVueCore)
app.mount('#app')

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 yarn storybook)

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