Good to know

• Using custom tags directly inside the tag will fuck up transitions, always wrap within an extra div

  Monorepo setup

  Version management

  The following principes apply:

  • The whole monorepo has a single pnpm-lock.yaml
  • Dependencies are locked to exact versions
  • CI build happens with pnpm install --frozen-lockfile (fails if out of sync with package.json)
  • Use only the pnpm manage tool to handle dependencies

  Declarations in package.json are as follows (enforce with pnpm manage)

  • Regular dependencies are the ones needed at runtime. Dependencies of a library and consumer are independent, e.g. if layer specifies yaml and the app also then two independent yaml installations are used.
  • Dev dependencies are purely needed for development/build of the current package. If a layer uses a dependency for e.g. a build hook that is used in a consumer then declare it a regular dependency.
  • Peer dependencies are for library packages that request the final consumer to provide a shared framework (e.g. nuxt, vue) or extend that shared framework (e.g. @nuxt/icon). A peer dependency must always also be listed as dev dependency in the declaring library package. If a library depends on another library it should re-declare the peer (& associated dev) dependencies.
  • The final consumer (app) declares all peer dependencies from parent packages as prod dependencies

  Tailwind setup

  Dont use @nuxtjs/tailwindcss. Follow the instructions at https://tailwindcss.com/docs/installation/framework-guides/nuxt (actually adding the tailwind plugin in nuxt.config.ts isnt necessary it seems) tailwind.config.js isnt a thing anymore according to docs, everything can be configured in the css file: https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration

  --spacing-* isnt a thing anymore, only a single --spacing (defaults to 0.25rem) is used now. It scales basically everything, e.g. p- means padding: calc(var(--spacing) * );

  Utilities are only generated if detected by tailwind, need to use @source or import "tailwind" source("dir-to-scan"), need to check how this works in apps

  tailwind classes like p-* are only supposed to take integers or .5 steps, nothing else (and this only for backwards compatibility)

  Tailwind scans source files for used classes and only generates those. Doesnt work too well apparently with nuxt, so in the .css write @source to specify folders to scan This especially applies to apps that use layers, where the layers export components that themselves use some classes, so best do @source the layer too.

  Ellipsis

  set width:100% on all parents (or somehow a defined with) apply truncate to direct parent of text (e.g. <span class=truncate) within flexbox or grid set min-w-0 for parent if it doesnt work. if inside a flex-col also set w-full to the span itself in addition to truncate

  Mobile menu background scale

  set data-vaul-drawer-wrapper e.g. on whatever should be zoomed out (eg <main data-vaul-drawer-wrapper)

  Vue component props

  If a boolean is specified in defineProps as flag?: boolean and its not passed vue makes it false, not undefined! explicitely set useDefaults

  HTML tags

  footer (outside main) is furniture, dont use h1 or so, just use p and style it like it was e.g. heading each route should have exactly one h1. can be in header navbar if its dynamic, or somewhere hidden, but it should be there.

  DOES NOT HAVE A SINGLE ROOT ERRRO

  For the love of god never put a html comment inside a section