snoboard

This project is built with Vue 3, laid out with PrimeVue and designed with TailwindCSS.

Do it yourself

Setup

npm install

Create a .env file, and define the following environment variables:

Develop

npm run dev

Test

# unit testing (Vitest):
npm run test:unit

Build

npm run build

Tooling

VSCodium + Volar (not Vetur) is a recommended setup.

For support of .vue imports in TS, chose your path and follow the steps below:

1. TypeScript Vue Plugin

Pro: One-time setup
Con: Two TS language services are running in parallel (Codium's default and plugin one), which can impact Codium performances

Install the TypeScript Vue Plugin (Volar), and you're ready to go.

2. Volar "Takeover Mode" (recommended)

Pro: Only one TS language service running
Con: A quick setup is needed for each project

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Source: https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode

Code style guidelines

Project structure

TBD

Imports organisation in JS/TS

JS or TS code files - including the <script> part of Vue's SFCs, should be organised in the following way for how they import other code, which should be done at the top of the file:

/**
 * Vue imports
 */
import { ... } from 'vue'
import { ... } from 'vue-router' // Place official Vue ecosystem libs here too.
/**
 * Components imports
 */
import ... from 'componentLib/some3PComponent'
import ... from '@/components/someLocalComponent'
import ... from '@/layout/someLayoutComponent'
import ... from '@/views/someViewComponent'
/**
 * Composables imports
 */
import ... from '@/composables/useSomeComposable'
import { ... } from '@vueuse/core'
/**
 * Other 3rd-party imports
 */
import { ... } from 'lodash-es'
/**
 * Stores imports
 */
import { ... } from '@/stores/someStore'
/**
 * Types imports
 */
import { type ... } from 'lib/someTypes'
import { type ... } from '@/typings/someTypes'
/**
 * Utils imports
 */
import { ... } from '@/utils/someUtil'
/**
 * Assets imports
 */
import ... from '@/assets/path/to/asset'

Tailwind classes with Vue

Vue has several ways to define classes, including an object syntax and an array syntax. To deal with Tailwind's classes in a consistent way, the following guidelines should be observed:

• Write predetermined classes inline:

  class="class-1 class-2..."

• Write parametrised classes as template literals:

  :class="`class-${param} class-${param2}`"

• Write conditioned classes with object syntax if there is only one class for each condition, otherwise use ternary or &&:

  :class="{
    'class-1': condition1,
    // to use template literal as key, enclose it in brackets:
    [`class-${two}`]: condition2
  }"
  // if more than 1 class/condition:
  :class="condition ? 'class-1' : 'class-2 class-3'"
  :class="condition && 'class-1 class-2 class-3'"

• Finally, if several of these forms have to be used, combine them with the array syntax:

  :class="[
    `class-${param}`,
    {
      'class-2': condition
    },
    condition2 && 'class-3',
    'class-4 class-5'
  ]"

These rules can be applied in kind of a recursive manner, for example when using parametrised class in a conditional one.