{"id":13181,"library":"fds-vue-core","title":"FDS Vue Core Component Library","description":"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.","status":"active","version":"6.2.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vue","vue3","components","library","fds","typescript"],"install":[{"cmd":"npm install fds-vue-core","lang":"bash","label":"npm"},{"cmd":"yarn add fds-vue-core","lang":"bash","label":"yarn"},{"cmd":"pnpm add fds-vue-core","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for all components.","package":"vue","optional":false}],"imports":[{"note":"This is the default export used for global registration via `app.use()`.","wrong":"const FdsVueCore = require('fds-vue-core')","symbol":"FdsVueCore","correct":"import FdsVueCore from 'fds-vue-core'"},{"note":"Individual components are named exports from the main package entry point.","wrong":"import FdsButtonPrimary from 'fds-vue-core/FdsButtonPrimary'","symbol":"FdsButtonPrimary","correct":"import { FdsButtonPrimary } from 'fds-vue-core'"},{"note":"The Tailwind preset is a default export from a specific CJS module path, crucial for proper styling.","wrong":"import { preset } from 'fds-vue-core'","symbol":"preset","correct":"import preset from 'fds-vue-core/tailwind.preset.cjs'"},{"note":"FdsWizard is a named export. Ensure your project is configured for ESM imports.","wrong":"const { FdsWizard } = require('fds-vue-core')","symbol":"FdsWizard","correct":"import { FdsWizard } from 'fds-vue-core'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport FdsVueCore from 'fds-vue-core';\n\n// main.ts\nconst app = createApp(App);\napp.use(FdsVueCore);\napp.mount('#app');\n\n// tailwind.config.js\nimport preset from 'fds-vue-core/tailwind.preset.cjs';\n\nexport default {\n  presets: [preset],\n  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']\n};\n\n// style.css\nimport 'fds-vue-core/tokens.css';\nimport 'tailwindcss/base';\nimport 'tailwindcss/components';\nimport 'tailwindcss/utilities';\nimport 'fds-vue-core/slot-styles.css';\nimport 'fds-vue-core/apply.css';\nimport 'fds-vue-core/fonts.css';\n\n// App.vue\n<template>\n  <div>\n    <FdsButtonPrimary>Hello FDS!</FdsButtonPrimary>\n    <FdsInput v-model=\"inputValue\" placeholder=\"Enter text\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\n\nconst inputValue = ref('');\n</script>","lang":"typescript","description":"Demonstrates the global registration of FDS Vue Core, necessary Tailwind CSS setup, and basic usage of components in a Vue template."},"warnings":[{"fix":"Ensure `vue@^3.5.0` is explicitly installed in your project: `pnpm add vue@^3.5.0`.","message":"FDS 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.","severity":"breaking","affected_versions":"<6.2.1"},{"fix":"Refer to the documentation for `tailwind.config.js` and `style.css` setup. Missing this will result in unstyled components.","message":"Proper 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`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Implement route handling (e.g., using `vue-router`) and manage component data externally. The wizard only provides the navigation UI and emits events.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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'`.","cause":"FDS Vue Core components were not globally registered via `app.use(FdsVueCore)` or individually imported.","error":"Failed to resolve component: FdsButtonPrimary"},{"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'`.","cause":"The Tailwind CSS configuration is incorrect, or the `fds-vue-core` package is not correctly installed/accessible.","error":"Module not found: Can't resolve 'fds-vue-core/tailwind.preset.cjs'"},{"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.","cause":"Occurs when attempting to `app.use()` a non-plugin object, often when mixing default and named imports or using `require()` for an ESM package.","error":"TypeError: Cannot read properties of undefined (reading 'install')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}