Miscellaneous notes on the frontend#
Formatting and Linting#
The code in this repository is formatted using
prettier. If you have prettier
setup in your code editor it should work out of the box; otherwise you can use
just frontend/run lint script to format and fix lint errors in your code.
Checks are run to lint your code and validate the formatting on git precommit.
File name conventions#
All files and folders should be written in
kebab-case, with the exception of
Vue single file components. If it ends in
.vue, please use
distinction makes our component files stand out clearly and is
recommended by the Vue community.
Nuxt server middleware
The frontend app is composed of a number of components that are documented in our Storybook.
How to create a component#
To create a component you can run:
# Make sure you have run `pnpm install` at least once before. pnpm run create:component [component name in PascalCase] for example: pnpm run create:component VButtonGreen
This command will create a component file, a story file for the component, a
unit test file, and a regression test file. It also adds the component name to
include property. Each file will have a basic template to start
working with. We use the
package to create files out of templates.
You can also create all those files manually by running the following commands:
create a component file
pnpm run create:component-sfc --output=[path] --name=[component name]
create a story file
pnpm run create:story --output=[path] --name=[component name]
create a component unit test file
pnpm run create:component-unit-test --output=[path] --name=[component name] --fileName=[component name in kebab-case]
create a component regression test file
pnpm run create:component-storybook-test --output=[path] --name=[component name kebab-case] --fileName=[component name in kebab-case]
If you use VS Code, you can install the Tailwind CSS IntelliSense extension to get autocomplete for TailwindCSS classes.
Finding your local IP address#
You can find the local IP address Nuxt uses by looking at the output of
nuxt dev. Look in your console for a box of configuration details that looks
# ╭───────────────────────────────────────────╮ # │ │ # │ Nuxt @ v2.15.8 │ # │ │ # │ ▸ Environment: development │ # │ ▸ Rendering: server-side │ # │ ▸ Target: server │ # │ │ # │ Listening: http://192.168.50.119:8443/ │ # <-- Use this IP Address # │ │ # ╰───────────────────────────────────────────╯
You will need to regenerate the certificate if this IP address changes for any reason, like by enabling a VPN or changing networks.