@nethserver/vue-tailwind-lib v0.1.2

vue-tailwind-lib

Vue 3 + Tailwind CSS components and utilities library. It includes a Storybook to develop and test components in isolation.

This library is published as a NPM package and is currently used by nethsecurity-ui.

Recommended IDE Setup

• VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Development

You can develop and build inside a container (recommended) or on your workstation.

Develop inside a container

You have two options:

• Build and start a Podman container, or
• Use VSCode Dev Containers

Build and start a Podman container

To start storybook with hot-reload:

./dev.sh

To build the library:

./dev.sh npm run build

Use VSCode Dev Containers

• Install VSCode extension Dev Containers (beware: this procedure may not work on VSCodium)
• Dev Containers uses Docker by default, but you can configure it to use Podman: go to File > Preferences > Settings, search dev containers docker path and type podman as Docker path
• Open vue-tailwind-lib directory (the repository root) in VSCode, if you haven't already
• Open Command Palette (CTRL+SHIFT+P) and type Reopen in Container (or Rebuild and Reopen in Container, if needed)
• Open VSCode integrated terminal: View > Terminal
• Enter one of the following commands:
  • npm install: project setup
  • npm run storybook: start storybook with hot-reload
  • npm run build: compiles and minifies before publishing. Build output is put inside dist directory
  • npm publish: Publish a new version of the NPM package

Container configuration is contained inside .devcontainer/devcontainer.json.

Develop on your workstation

Developing inside a container is the recommended way, but if you want to do it on your workstation:

• Install Node.js (LTS version, currently v20) and npm
• Run a web server on your workstation (hot reloading enabled):
  • npm install: project setup
  • npm run storybook: start storybook with hot-reload
  • npm run build: compiles and minifies before publishing. Build output is put inside dist directory
  • npm publish: Publish a new version of the NPM package