• Nuxt as framework
• Vite for development and build
• SCSS for styles
• Typescript for scripts
• PNPM as package manager
• EsLint / StyleLint for linting and code formatting

Duplicate the .env.sample 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

Start the development server on http://localhost:6006 with stories preset (use the .env.stories file):

docker compose up -d // start the Intervention Request service pnpm dev:stories

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:js

pnpm lint:css

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 SVG files in ~/assets/images/icons can be displayed using the VIcon component. Set the file name to display svg as a background-image or mask-image element. See the module @nuxt/icon documentation for more information.

<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 @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.

The application can be built and run in a Docker container. This starter provide a multi-stage Dockerfile with a production build and a Nginx server.

You can test build node image with the following command:

docker buildx build --target node-prod -t nuxt-starter/node .

Or use docker buildx bake to build all images in parallel. Update docker-bake.hcl file with your own values.

docker buildx bake

This starter provide a .gitlab-ci.yml example file for a CI/CD pipeline using docker build.

Please refer to the CONTRIBUTING.md file for more information.