fds-vue-core

library6.2.1jsnpmunverified

FDS Vue Core is a Vue 3 component library providing a comprehensive suite of UI components, design tokens, and icons, all aligned with Feelgood's digital design guidelines. Currently at version 6.2.1, it offers ready-to-use components like form fields, buttons, tables, and modals. It leverages Tailwind CSS extensively, requiring specific configuration in the consuming project. The library is designed for modern Vue 3 applications, ships with full TypeScript support, and emphasizes an ESM-first approach. Its key differentiators include tight integration with Feelgood's design system, a strong focus on composability (e.g., `FdsWizard` managing only navigation, not data), and a robust type-safe API.

web-framework

npm install fds-vue-core

package ↗

INSTALL

IMPORT

SIG · FDS-VUE-CORE

fds-vue-core

web-frameworkjavascriptv6.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

FdsVueCore

✓ import FdsVueCore from 'fds-vue-core'

✗ const FdsVueCore = require('fds-vue-core')

This is the default export used for global registration via `app.use()`.

FdsButtonPrimary

✓ import { FdsButtonPrimary } from 'fds-vue-core'

✗ import FdsButtonPrimary from 'fds-vue-core/FdsButtonPrimary'

Individual components are named exports from the main package entry point.

preset

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

✗ import { preset } from 'fds-vue-core'

The Tailwind preset is a default export from a specific CJS module path, crucial for proper styling.

FdsWizard

✓ import { FdsWizard } from 'fds-vue-core'

✗ const { FdsWizard } = require('fds-vue-core')

FdsWizard is a named export. Ensure your project is configured for ESM imports.

Demonstrates the global registration of FDS Vue Core, necessary Tailwind CSS setup, and basic usage of components in a Vue template.

import { createApp } from 'vue'; import App from './App.vue'; import FdsVueCore from 'fds-vue-core'; // main.ts const app = createApp(App); app.use(FdsVueCore); app.mount('#app'); // tailwind.config.js import preset from 'fds-vue-core/tailwind.preset.cjs'; export default { presets: [preset], content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'] }; // style.css import 'fds-vue-core/tokens.css'; import 'tailwindcss/base'; import 'tailwindcss/components'; import 'tailwindcss/utilities'; import 'fds-vue-core/slot-styles.css'; import 'fds-vue-core/apply.css'; import 'fds-vue-core/fonts.css'; // App.vue <template> <div> <FdsButtonPrimary>Hello FDS!</FdsButtonPrimary> <FdsInput v-model="inputValue" placeholder="Enter text" /> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; const inputValue = ref(''); </script>

Debug

Known issues

breakingFDS Vue Core has a strict peer dependency on Vue 3.5.25 or higher. Installing with an incompatible Vue version will lead to runtime errors or build failures.

fix

Ensure `vue@^3.5.0` is explicitly installed in your project: `pnpm add vue@^3.5.0`.

affects: <6.2.1

gotchaProper Tailwind CSS configuration is mandatory for FDS Vue Core components to render correctly. This includes importing the `tailwind.preset.cjs` and specific CSS imports like `tokens.css` and `slot-styles.css`.

fix

Refer to the documentation for `tailwind.config.js` and `style.css` setup. Missing this will result in unstyled components.

affects: >=1.0.0

gotchaThe `FdsWizard` component is route-based and deliberately does not manage its own state or data. Consumers are responsible for handling route navigation and state management, providing `activeRouteName` and listening to `@go` events.

fix

Implement route handling (e.g., using `vue-router`) and manage component data externally. The wizard only provides the navigation UI and emits events.

affects: >=1.0.0

gotchaThe package includes a postinstall script for syncing VS Code settings. While optional, if included in `package.json`, ensure the `|| true` suffix is present to prevent installation failures if the script encounters an error.

fix

Add `"postinstall": "pnpm run sync:vscode:settings || true"` to your `package.json` scripts if you intend to use the VS Code settings sync, ensuring resilience during installation.

affects: >=1.0.0

Errors

Common errors & fixes

Failed to resolve component: FdsButtonPrimary

FDS Vue Core components were not globally registered via `app.use(FdsVueCore)` or individually imported.

fix

In your `main.ts` (or equivalent), ensure `app.use(FdsVueCore)` is called *before* mounting the app, or explicitly import desired components like `import { FdsButtonPrimary } from 'fds-vue-core'`.

Module not found: Can't resolve 'fds-vue-core/tailwind.preset.cjs'

The Tailwind CSS configuration is incorrect, or the `fds-vue-core` package is not correctly installed/accessible.

fix

Verify `fds-vue-core` is installed via `pnpm add fds-vue-core`. Ensure `tailwind.config.js` correctly imports `preset from 'fds-vue-core/tailwind.preset.cjs'`.

TypeError: Cannot read properties of undefined (reading 'install')

Occurs when attempting to `app.use()` a non-plugin object, often when mixing default and named imports or using `require()` for an ESM package.

fix

Ensure you are using `import FdsVueCore from 'fds-vue-core'` for the default export when calling `app.use(FdsVueCore)`. Do not use named imports or `require()` for the global plugin object.

Upgrade

Version history

6.2.1latest on npm

Audit

Dependencies

vuerequiredRequired peer dependency for all components.

Agent activity

3 hits · last 30 days

node

Bingbot

Resources

packagehttps://www.npmjs.com/package/fds-vue-core ↗