Soil

WIP: this project is still at an early stage of development.

Features

- Vue 3 + Vue Router
- Node 16
- TypeScript 4.1
- SASS with CSS modules
- Oruga
- Bulma
- Unit tests with Jest + Chai
- End to end tests with Cypress
- Storybook
- Yarn
- Babel
- Linters for Vue (recommended rules), TypeScript and JavaScript
- Code formatting via Prettier
- Font Awesome 5 solid icons
- Commit message linting with commitlint, using an improved version of Conventional Commits
- Internationalization

Conventions

$3

All the related code is aggregated:
- Components
- External services
- Types
- Constants
- Unit tests
- Storybook stories
- Fixtures (used on unit tests and Storybook stories)
- Mocks

Components are defined and used with their entire namespace (SComponent), although they are stored without it (domain/SComponent).

$3

Similar to components, layouts should include all the children components that exist only to support them.
Only the layout component should be exported.
That main component could be named _.vue to keep the folder as the name (in layouts/MyLayout/_.vue the name is LayoutMyName).

$3

Vue SFC should use CSS modules when possible.
There are 2 special settings:
- It is possible to use ._ as class name. It is replaced by the component name. It is useful for the root element.
- It is possible to use camelCase in the template (.myClass) while using kebab-case on the CSS (my-class).

Setup

``
yarn add @meaningfuldata/soil
`

$3

`
yarn add @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core axios lodash-es vue-i18n
`

Scripts

$3

`
yarn serve
`

$3

`
yarn build
`

$3

`
yarn test:unit
`

#### Watch and run unit tests on changes
`
yarn test:unit:watch
`

#### Debug unit tests
`
yarn test:unit:inspect
`

$3


`
yarn test:e2e
`

#### Watch and run end-to-end tests on changes
`
yarn test:e2e:watch
`

$3


`
yarn lint
`

$3

`
yarn storybook
`

#### Build the storybook
`
yarn storybook:build
``

License

Apache 2.0

Authors