@verdnatura/vn-front-lib

vn-front-lib

A shared library of Vue 3 components and composables used across the salix-front and hedera-web projects. It is not a standalone app — it's built in library mode (Vite build.lib) and consumed as a dependency.

What's inside

• lib/components/ — Vue components (prefixed with Vn, e.g. VnInput).
• lib/composables/ — reusable composables (e.g. useRequired, useValidator).
• lib/stores/ — Pinia stores (e.g. useValidationsStore).
• lib/i18n/locale/ — translation files (en.yml, es.yml).

pinia, vue-i18n, axios, validator and quasar are expected to be provided by the consuming project (declared as peerDependencies).

Recommended VS Code extension

This project uses oxlint and oxfmt for linting and formatting. It's advisable to install the Oxc VS Code extension, which powers format-on-save and inline lint diagnostics based on the .oxlintrc.json and .oxfmtrc.json config files in this repo.

Scripts

pnpm install
pnpm run dev         # Vite dev server
pnpm run build       # build the library (output to dist/)
pnpm run lint        # oxlint
pnpm run lint:fix    # oxlint --fix
pnpm run fmt         # oxfmt
pnpm run fmt:check   # oxfmt --check

Developing locally against another project

To test changes locally in another project (e.g. salix-front or hedera-web) without publishing, add this repo as a real pnpm workspace member rather than using a plain link: dependency, so vue/pinia get deduped into a single instance across both projects:

1. In the consuming project's pnpm-workspace.yaml, add this repo as a package:

   packages:
     - .
     - ../vn-front-lib
   

2. In the consuming project's package.json, depend on it via the workspace protocol, using the real package name:

   "@verdnatura/vn-front-lib": "workspace:@verdnatura/vn-front-lib@*",
   

3. Enable the vnSource resolution condition in the consumer's Vite/Vitest config so imports resolve to this repo's lib/ source instead of the dist/ build:

   resolve: {
       conditions: ['vnSource'],
   },
   

4. Reinstall dependencies in the consuming project (pnpm install), then run pnpm why vue -r / pnpm why pinia -r to confirm only one version of each resolves across the workspace.