Nuxt starter

Application overview

• 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

Environment variables

Duplicate the .env.example file and rename it to .env.
Fill in the environment variables with the correct values.

Setup

Make sure to install the dependencies:

pnpm install

Development Server

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

Production

Build the application for production:

pnpm build

Locally preview production build:

pnpm preview

Code quality and formatting

Run the following command to lint and format the code:

pnpm lint

Lint and format script (JS / Vue files)

pnpm lint:js

Lint and format style (CSS / SCSS / Vue files)

pnpm lint:css

Lint fix (script and style)

pnpm lint-fix

I18n

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

Image

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.

SVG

Single file

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>

Sprite

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>

Stories

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.

Monitoring

Sentry is included in the application for error monitoring.

Fill the .env file with the values for enabling Sentry.

SENTRY_DSN=

Sitemap

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.

Docker build

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.

Contributing

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