[![](https://git.klemek.fr/klemek/vue-template/actions/workflows/lint.yml/badge.svg?branch=main&style=flat-square)](https://git.klemek.fr/klemek/vue-template/actions?workflow=lint.yml) [![](https://git.klemek.fr/klemek/vue-template/actions/workflows/deploy.yml/badge.svg?branch=main&style=flat-square)](https://git.klemek.fr/klemek/vue-template/actions?workflow=deploy.yml)

# Vue-boilerplate

_Minimal static Vue project_

<!-- TODO: 1. rename app (and tool URL) -->

### [Tool link]()

## Use this template

<!-- TODO: 3. remove this part -->

### Creating project

#### Method 1: Using GitHub repository template

[Use this template](https://git.klemek.fr/repo/create?template_id=10)

#### Method 2: CLI forking

```bash
git clone ssh://git@git.klemek.fr:42617/klemek/vue-template.git {PROJECT}
cd {PROJECT}
git remote rename origin template
git remote add origin {PROJECT REMOTE}
```

### Tasks

> Every task is indicated with a TODO

1. [ ] Rename app in [README.md](./README.md), [index.html](./index.html), [App.vue](./src/App.vue) and [package.json](./package.json)
2. [ ] Change app hue and saturation in [style.css](./public/style.css)
3. [ ] Remove this part and all TODO

### Updating from template

To update from templates latest changes:

```shell
make update-template
```

### Upgrade from version 1

```shell
git remote add template ssh://git@git.klemek.fr:42617/klemek/vue-template.git
git fetch template
git rm --force '*'
git checkout template/main -- '*'
git remote remove template
# re-code logic by checking online code
```

### Makefile targets

```txt
Usage: make [target1] [target2] ...

Commands/Targets:
help                 show this message
install              install project
install              update project
build                build static site in "dist"
dev                  run dev server
lint                 lint code
format               fix and reformat code
update-template      fetch and merge core changes from template
```

### Tips

- [Material design colors](https://materialui.co/colors/) are available, you can use `class="red-500"` on your HTML (see [full list](https://github.com/shuhei/material-colors/blob/master/dist/colors.css))
- [Lucide icons](https://lucide.dev/icons) are available, you can use `<i icon=house></i>` on your Vue template
- The .button class make links more beautifuls (can also be .disabled or colored amber-300)