Frontend

All our web projects frontends are made with Vue specifically Nuxt.

Simple vue project

To start a simple Vue project use create-vue:

pnpm create vue@latest

yarn

yarn create vue@latest

npm

npm create vue@latest

Nuxt project

To start a Nuxt project use nuxi:

pnpm dlx nuxi@latest init <project-name>

yarn

yarn dlx nuxi@latest init <project-name>

npm

npx nuxi@latest init <project-name>

Recommended choices

? Which package manager would you like to use? pnpm
? Initialize git repository? Yes

Project structure

Nuxt 4 uses an app/ directory as the root for your application code:

├── app/
│   ├── assets/         # Static assets (images, fonts, global CSS)
│   ├── components/     # Auto-imported Vue components
│   ├── composables/    # Auto-imported composables
│   ├── layouts/        # Page layouts
│   ├── middleware/     # Route middleware
│   ├── pages/          # File-based routing
│   ├── plugins/        # Nuxt plugins
│   └── app.vue         # Root component
├── public/             # Served as-is (favicon, robots.txt)
├── server/             # Server routes and API (Nitro)
└── nuxt.config.ts

Common commands

pnpm dev          # Start development server
pnpm build        # Build for production
pnpm preview      # Preview production build locally
pnpm generate     # Static site generation

nuxt.config.ts

Basic configuration for a new project:

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },

  modules: [
    // add modules here e.g. '@nuxt/ui', '@nuxtjs/i18n'
  ],
})

Environment variables

Create a .env file at the project root. Variables prefixed with NUXT_PUBLIC_ are exposed to the client:

NUXT_PUBLIC_API_BASE=https://api.example.com
NUXT_SECRET_KEY=server-only-value

Access them in your app via useRuntimeConfig():

const config = useRuntimeConfig()
console.log(config.public.apiBase)     // client + server
console.log(config.secretKey)          // server only

And declare them in nuxt.config.ts for type safety:

export default defineNuxtConfig({
  runtimeConfig: {
    secretKey: '',
    public: {
      apiBase: '',
    },
  },
})

TypeScript

TypeScript is configured automatically by Nuxt. A tsconfig.json is generated in .nuxt/ and extended by the root tsconfig.json — no manual setup required.