N-SIDE WeFa (Web Factory) is a Vue 3 toolkit that accelerates building cohesive product interfaces. It combines a component library, opinionated data layer helpers, internationalisation utilities, and CLI scripts so product teams can ship consistent exper
npm install @nside/wefaN-SIDE WeFa (Web Factory) is a Vue 3 toolkit that accelerates building cohesive product interfaces. It combines a component library, opinionated data layer helpers, internationalisation utilities, and CLI scripts so product teams can ship consistent experiences quickly.
- About
- Feature Highlights
- Installation
- Install from npm
- Install from a local build
- Post-install tooling
- Using the library
- Icons and the registry helper
- Development workflow
- Core scripts
- Testing and quality gates
- Storybook and documentation
- Contributing
- Release process
- License
- Project status
The library is built on top of the following ecosystem:
- Vue 3 + Vite for fast DX
- PrimeVue and Tailwind for UI foundations
- Pinia for state management
- Vue I18n for localisation
- Axios and Hey-API for HTTP and schema tooling
A demo playground lives alongside the library so you can experiment locally while developing components.
- Rich component catalogue following the WeFa design language
- Reusable containers, router helpers, and data-client utilities for product scaffolding
- CLI (wefa-install) that bootstraps recommended project configuration
- Opinionated linting, formatting, and testing presets aligned with modern Vue best practices
``bash`
npm install @nside/wefaor
pnpm add @nside/wefaor
yarn add @nside/wefa
Import the base styles once in your application (for example in main.ts):
`ts`
import '@nside/wefa/style';
Use this flow when testing unreleased changes from a cloned repository:
`bash`
cd vue
npm install
npm run build
npm packThis outputs something like wefa-1.0.0.tgz
Then, in your consuming project:
`bash`
npm install --force /absolute/path/to/wefa-1.0.0.tgz
Repeat the build-and-pack step whenever you change the library.
Run the bundled installer to copy optional helpers (AI prompts, configuration snippets, etc.) into your project:
`bash`
npx wefa-install
Import components and types directly from the package:
`vue
`
Types live under the @nside/wefa/types export:
`ts`
import type { WefaButtonProps } from '@nside/wefa/types';
WeFa uses Iconify under the hood. Bundled icon collections are registered automatically by calling setupDefaultIcons() inside src/iconRegistry.ts. If you need extra icons offline:
1. Install the relevant @iconify-json/ package.
2. Register the collection at application bootstrap time.
`ts
import { registerCollections } from '@nside/wefa';
import mdi from '@iconify-json/mdi';
registerCollections(mdi);
`
If an icon is missing from the local registry Iconify transparently falls back to an online fetch.
From the vue/ directory:
| Command | Description |
| --- | --- |
| npm run dev | Start the demo application with hot-module replacement |npm run build
| | Build the library bundle (includes type checking) |npm run preview
| | Serve the built demo application |npm run storybook
| | Launch Storybook for interactive documentation |npm run build-storybook
| | Build the static Storybook site |npm run lint
| / npm run lint-check | Auto-fix or check ESLint rules |npm run format
| / npm run format-check | Run Prettier in write/check mode |
The project targets Node.js 20+. Use the included .nvmrc (to be added) or your preferred version manager to align with CI.
- Unit tests: npm run test:unitnpm run test:unit:watch
- Unit tests in watch mode: npm run test:e2e
- End-to-end tests (Playwright against the demo app):
Aim for meaningful coverage when adding or changing components. Update or create MDX docs and Storybook stories alongside code changes.
Storybook acts as both documentation and manual testing ground. Start it locally with npm run storybook. When contributing new components:
- create ComponentName.stories.ts showcasing variantssrc/components/ComponentName/ComponentName.mdx
- add MDX docs if consumers need contextual guidance ()
- keep props tables and accessibility notes up to date
The file src/README.mdx pulls in this README so Storybook stays in sync.
We welcome pull requests! Start with CONTRIBUTE for the full workflow, environment setup, and quality gates. In short:
1. Align on the problem via an issue or discussion before large changes.
2. Keep linting, formatting, tests, and Storybook docs up to date.
3. Document UI changes with screenshots or recordings when helpful.
4. Run the commands listed in the contribution guide before pushing.
Versioning currently follows SemVer. To test a release locally:
`bash``
npm version
npm publish --access public