Monorepo with Nx, Vite, Vue3, Vuetify, Pinia and Typescript

Features

Vue.js Apps and Libs

• Typescript
• Vite
  • Production builds with tree-shaking, lazy-loading and common chunk splitting
  • Static generated (eg js and css) and imported (eg image names) filename's are hashed to avoid caching issues.
• Vue.js
• Vue Router
• Vuetify
• Pinia
• Sass / Scss
• Material Design Icons
• Web Font Loader
• TODO: Storybook: https://nx.dev/packages/storybook and https://storybook.js.org/

Testing

• Vitest for unit tests
  • TODO: code coverage
• TODO: Cypress for browser-based tests
  • https://www.cypress.io/
  • https://docs.cypress.io/plugins
    • vite
    • with gherkin/cucumber
    • code coverage ?
  • https://marketplace.visualstudio.com/items?itemName=Shelex.vscode-cy-helper

Nx for monorepo management

• @nx/vite
• @nxext/vue
• @nx/cypress
• @nx/eslint-plugin

Linting and Coding Conventions

• EditorConfig
• ESLint
  • eslint-config-prettier
  • eslint-plugin-vue
  • eslint-plugin-vuetify
  • rule.sort-imports and eslint-plugin-import and eslint-import-resolver-typescript
    • Keep import statements sorted and organised
  • NOTE: nx also has default configuration for typescript in eslint that are imported
• Prettier
  • editorconfig = true: Prettier uses compatible editorconfig settings, so don't have to configure the same rules in multiple places
• Code Spell Checker (CSpell)
  • CSpell seems to have a lot of IDE plugins and simple configuration.
  • Use .cspell.json to add configuration and .project-dictionary.txt valid words for the repository, on top of whatever language dictionary is configured.
  • Added lint:spellcheck script to package.json so that can run outside of an IDE.
  • Visual Studio Code: Code Spell Checker
    • Has en (US) and en-GB installed by default, but other language dictionaries are available
  • JetBrains Rider: CSpell Check

CI/CD

• GitHub Actions
  • TODO: renovate - auto merge for patch / minor updates

Other

• Husky
  • Runs prettier, eslint, cspell and unit tests as a git pre-commit hook
  • Scripts configured to only run staged (ie files that have changes) files for the commit.
• Visual Studio Code
  • Includes recommended extensions and settings for the IDE in this repository.

Setup

Prerequisites

• npm and npx
• yarn (or alter the instructions below to use your preferred package manager )

Basic Install

# Install npx globally
npm install -g npx

# Create "monorepo-nx-vite-vue3-vuetify-ts" repo with:
# - yarn package manager
# - configured for typescript + vite + vitest + vue apps
npx create-nx-workspace@latest monorepo-nx-vite-vue3-vuetify-ts --preset=@nxext/vue --pm yarn
# - Enable distributed caching to make your CI faster? No (I don't want to use https://nx.app/, but you can if you wish)
# - App Name: my-app

cd monorepo-nx-vite-vue3-vuetify-ts

# Add more packages for vue
# The "-W" flag installs them at the root level
yarn add -W @mdi/js pinia vue-router vuetify webfontloader

yarn add --dev @types/webfontloader @vitejs/plugin-basic-ssl @vue/tsconfig sass vite-plugin-vuetify

# Add more packages for testing
yarn add --dev @nx/cypress
# cypress
# eslint-plugin-cypress

# Add other tooling packages
# - linting and code conventions
yarn add --dev eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-vue eslint-plugin-vuetify cspell
# - husky
yarn add --dev husky
npx husky-init

# concurrently ?
# eslint-plugin-promise
# eslint-plugin-ts doc
# vite-plugin-checker

Manual Config Updates

package.json

Ensure the following packages are in devDependencies (instead of dependencies)

• @nx/.*
• @nxext/.*
• vue-tsc

All Vue apps and libs

vite-env-d.ts

IMPORTANT: Ensure that the vite-env-d.ts file is added to the src directory.

This will likely need to be done for all new Vue projects/packages.

project.json

Ensure vue is added to "lintFilePatterns".

NOTE: This step will need to be done for all new Vue projects/packages.

  "lint": {
    ...
    "options": {
      "lintFilePatterns": ["apps/my-app/**/*.{ts,tsx,vue,js,jsx}"]
    }
  }

Check the following files for differences to auto generated

• .editorconfig: Setup EditorConfig with your preferred code conventions.
• .eslintrc
  • NOTE: @nx/typescript already extends the usual eslint + typescript and prettier plugins
  • Ensure that "*.vue" config is setup
• .prettierrc
  • Add the option "editorconfig": true so that Prettier will default to compatible EditorConfig settings. This saves on having to update settings twice for the same thing.
  • Setup Prettier with your preferred code conventions.
• vite.config.ts
  • Add plugins for SSL, Vuetify
• tsconfig.***.json everywhere

Generate code

If you happen to use Nx plugins, you can leverage code generators that might come with it.

Run nx list to get a list of available plugins and whether they have generators. Then run nx list <plugin-name> to see what generators are available.

Learn more about Nx generators on the docs.

Running tasks

To execute tasks with Nx use the following syntax:

nx <target> <project> <...options>

You can also run multiple targets:

nx run-many -t <target1> <target2>

..or add -p to filter specific projects

nx run-many -t <target1> <target2> -p <proj1> <proj2>

Targets can be defined in the package.json or projects.json. Learn more in the docs.

Want better Editor Integration?

Have a look at the Nx Console extensions. It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.

Ready to deploy?

Just run nx build my-app to build the application. The build artifacts will be stored in the dist/ directory, ready to be deployed.

Set up CI!

Nx comes with local caching already built-in (check your nx.json). On CI you might want to go a step further.

• Set up remote caching
• Set up task distribution across multiple machines
• Learn more how to setup CI

Connect with us!

• Join the community
• Subscribe to the Nx Youtube Channel
• Follow us on Twitter