# Vuetindo

vue3 scaffolding app

## Getting started

Have `NodeJS` and `NPM` installed on your machine and clone this repository.

run `npm i` in the base directory to install all dependencies.

## dev server

This will create a local webserver with hot module reload support

```bash
npm run dev
```

In case you need a secure browser context for certain tasks, check the `readme.me` in the `containers/` folder.

## build

This will build the entire project into the `dist` folder.

```bash
npm run build
```

## build as npm package

This will build the entire project into the `lib` folder in library mode.

```bash
npm run build:lib
```

## publish npm package

1. Update `version` key in the `package.json`
2. Execute `npm run build:lib` to prepare build artefacts
3. Log in to npm (if needed)
4. Execute `npm publish @actindo/core-ui`

## preview the build

Even though the build outputs plain html/js/css, you can't simply open the index.html in the browser from the file
system to preview the project since it uses absolute paths to reference all assets.

This command will start a local webserver serving the built project (unlike the dev server which is NOT bundled for production)

```bash
npm run preview
```

## testing

You can either run all tests once by running

```bash
npm run test
```

or you can run all tests and the continue to perform all tests on further file changes:

```bash
npm run test:watch
```

To generate a coverage report, issue this command

```bash
npm run test:coverage
```

### IDE setup

The recommended IDE for this project is [Visual Studio Code](https://code.visualstudio.com/).

### Plugins

The following VSCode plugins are recommended for a better developer experience - they are also in the list of recommended plugins
of this project, so your VSCode should offer you to install them automatically.

#### Prettier - Code formatter

The [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension
teaches the ide the prettier code style and lets you automatically format the code to our configured standards.

`ext install esbenp.prettier-vscode`

#### Vue Language Features (Volar)

The [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=vue.volar) extension
brings full vue support to VSCode.

`ext install vue.volar`

For improved performance it is also recommended to use the "Take Over Mode" for TypeScript+Vue support:
[Details on how and why to enable it](https://github.com/johnsoncodehk/volar/discussions/471).

#### Vitest

The [Vitest](https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer) extension
allows you to run your tests suites inline and even in watch mode in order to get live feedback for your code.

`ext install ZixuanChen.vitest-explorer`

#### ESLint

The [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) highlights all eslint problems
right in the editor and also allows you to fix them straight away.

`ext install dbaeumer.vscode-eslint`
