- Nuxt as framework
- Vite for development and build
- SCSS for styles
- Typescript for scripts
- PNPM as package manager
- EsLint / StyleLint for linting
- Prettier for code formatting
Duplicate the .env.example
file and rename it to .env
.
Fill in the environment variables with the correct values.
Make sure to install the dependencies:
pnpm install
Start the development server on http://localhost:3000
:
pnpm dev
Build the application for production:
pnpm build
Locally preview production build:
pnpm preview
Run the following command to lint and format the code:
pnpm lint
pnpm lint:script
pnpm lint:style
pnpm lint-fix
The application uses nuxt-i18n
module for internationalization.
Please refer to the documentation for more information.
The localized messages come from Xilofone, our translation management system.
The messages can be fetched automatically using the @rezo-zero/xilofone-fetch
script.
Fill the Xilofone env variables in the .env
file.
XILOFONE_BASE_URL=https://xilofone.rezo-zero.com
XILOFONE_USERNAME=
XILOFONE_PASSWORD=
XILOFONE_FILE_ID=
XILOFONE_OUTPUT=assets/locales/
Run the following command to fetch the messages:
pnpm xilo
The application uses @nuxt/image
module.
Please refer to the Nuxt image module documentation for more information.
The provider by default is Intervention Request.
Fill the .env file with the values for the provider.
NUXT_PUBLIC_INTERVENTION_REQUEST_BASE_URL=
NUXT_PUBLIC_INTERVENTION_REQUEST_NO_PROCESS_BASE_URL=
NUXT_PUBLIC_INTERVENTION_REQUEST_IMAGES_PATH=
See the provider documentation for more information.
Use vite-svg-loader
to import SVG file.
See the plugin documentation for more information.
<script setup lang="ts">
import IconCheck from '~/assets/images/icons/check.svg?component'
</script>
<template>
<div>
<IconCheck />
</div>
</template>
All the files in ~/assets/images/icons
are automatically imported in a SVG sprite.
It uses @nuxtjs/svg-sprite
module. See the module documentation for more information.
<template>
<div>
<SvgIcon name="check" width="14" height="11" />
</div>
</template>
Nuxt layer introduces a component VIcon
to easily use the sprite.
<template>
<div>
<VIcon name="check" />
</div>
</template>
The application uses @rezo-zero/nuxt-stories
module.
All the files with the .stories.vue
extension are automatically imported and displayed in the stories.
The stories are available on /_stories
.
The app must use a layout (at least a default one) for allowing the stories to be displayed.
See Nuxt stories caveat section.
Checkout the Nuxt stories documentation for more information.
Sentry is included in the application for error monitoring.
Fill the .env file with the values for enabling Sentry.
SENTRY_DSN=
The application uses @rezo-zero/nuxt-layer.
It extends the application with a set of features.
Learn more about Nuxt layer here.
The application uses @nuxtjs/sitemap
module.
It generates a sitemap from the pages/
directory.
Dynamic routes can be added with the server route /api/sitemap
.
Read the full module documentation here.