vue

name	vue
description	Conventions for Vue.js frontend development, including component structure, code quality, and standard packages. Use when building Vue.js frontends.
tagline	Vue.js frontend development conventions and component structure
last-updated	2026-05-09T00:00:00.000Z
autoload	{"tools":["read","write","edit"],"extensions":[".vue"]}

Vue.js Conventions

Code Organisation

• Keep modules focused and cohesive
• Prefer many small modules over few large ones
• All frontend code is in the src/frontend/ directory.
• Use the tree -a --gitignore -I .git . command to see the directory structure

Code Quality

Quality Checkers

• We use Prettier for formatting, ESLint for linting and vue-tsc for type checking
• Ensure that there is a check script in package.json, defined as:

  vue-tsc --noEmit && eslint src/frontend --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix
  

• Ensure that the makefile has a check recipe that includes npm run check
• Ensure that the checks pass

General Code Conventions

• Code should always fit within 88 characters
• All vue files should contain <script>, <template> and <style> tags, in that order
• All script tags should be typescript: <script setup lang="ts">
• All style tags should be scoped: <style scoped>
• All imports should happen at the top of each file
• Use regular CSS, no UI frameworks such as Tailwind

Standard packages

• Use vue-router for routing
• Use pinia for state management
• Use vue-toastification for toast notifications
• Use vue3-spinners for spinners

Documentation

• Avoid tutorial-style comments that explain what code does.
• Comments should explain why, not what (the code itself should be self-explanatory)
• Always prefer ascii characters over unicode (e.g., arrows as -> over →)

Example main.ts

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "@/App.vue";
import router from "@/routes";
import Toast from "vue-toastification";

import "@/assets/main.css";
import "vue-toastification/dist/index.css";

const pinia = createPinia();
const app = createApp(App);

app.use(pinia);
app.use(router);
app.use(Toast, {});

app.mount("#app");